Js-buy-sdk: "fetch is not defined"

[chrisallick]

granted i am not a node expert, but my expectation seems reasonable. I wanted to include the buy sdk javascript library and simply use it the way i do on the front end.

I keep getting this fetch is not defined error. I used babel cause it allows me to use the import, but that also doesn't help.

Any thoughts? Why can't i use require to include the shopify-buy package and simply use it the same way i do on the front end?

chrisallick:shopify_alerts chrisallick$ npx babel-node index.js --presets es2015,stage-2
Example app listening on port 3000!
ReferenceError: fetch is not defined
    at Client.fetcher (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/shopify-buy/index.js:1831:5)
    at Client.send (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/shopify-buy/node_modules/graphql-js-client/index.es.js:1963:19)
    at ProductResource.fetchAll (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/shopify-buy/src/product-resource.js:34:8)
    at /Users/chrisallick/Documents/code/shopify_alerts/index.js:14:36
    at Layer.handle [as handle_request] (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/express/lib/router/layer.js:95:5)
    at /Users/chrisallick/Documents/code/shopify_alerts/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Users/chrisallick/Documents/code/shopify_alerts/node_modules/express/lib/router/index.js:335:12)

import fetch from 'node-fetch';
import Client from 'shopify-buy';

const express = require('express');
const app = express();
const client = require('twilio')("snip", "snip");

const shopifyclient = Client.buildClient({
    storefrontAccessToken: 'snip',
    domain: snip'
});

app.get('/', (req, res) => {
    console.log(shopifyclient.product.fetchAll());

    res.send('Hello Worldss!');

    // client.messages.create({
    //  from: "",
    //  to: "",
    //  body: "Quanitty low!"
    // }).then((messsage) => console.log(message.sid));
});

[chrisallick]

this worked i think

fetch = require("node-fetch");
const shopify = require("shopify-buy");

[minasmart]

The constructor will take an argument for you to supply whichever server side fetch implementation you like.

This is not currently well documented, but you can do this in a nice way like

const fetch = require('node-fetch');
const shopify = require('shopify-buy');

const client = shopify.buildClient({
  storefrontAccessToken: 'abc123',
  domain: 'myshop.myshopify.com'
}, fetch);

The reason for this is that on the front end, we have one API and a guarantee of what APIs are available. In node-land, the network stack is whatever you want it to be. You could use the constructor directly, curry the internal graphql client constructor, and build your system using whatever network implementation you'd like. This hook to use a fetch compatible function exists for simplicity and for use cases like yours. We should just be documenting it better.

[chrisallick]

oh... yes that is much better... you should update the documentation so that example compiles as expected by a normal user.

[a-barbieri]

@minasmart: using your method I get Critical dependency: the request of a dependency is an expression when running webpack-dev-server (webpack 3.10.0) and using ES6 import.

As a workaround I'm currently creating a global variable only my test configuration file so on production environment webpack-dev-server doesn't complain and I don't get the error on my test.

test_helper.js

// @see https://github.com/Shopify/shopify-express/issues/44
global.fetch = require('node-fetch');

shopify_utils.js

import shopify from 'shopify-buy';
export const SHOPIFYCLIENT = shopify.buildClient({
  storefrontAccessToken: 'abc123',
  domain: 'myshop.myshopify.com'
});

Let me know if there is any better way to achieve this.
Ref

[isaachinman]

@minasmart The ability to provide a server-side fetch implementation should 100% be in the docs.

[FistMeNaruto]

I had a similar issue using Nuxt. Server side rendering wasn't working due to fetch not being available, installing isomorphic-fetch and simply doing

import "isomorphic-fetch"

in the page component solved this issue. Kind of a sledgehammer approach, but it works.

[cnviradiya]

Also works if you have already predefined global

(global as any).fetch = require('node-fetch'); in typescript