Shopify app with GraphQL failed to work when developing on Heroku

Question

I'm developing a Shopify private app with Node.js and React and using GraphQL api to make requests. Everything works fine when I run it locally and publish it with NGROK, but when I push the codes to Heroku, errors occur. It seems that there's something wrong with ApolloClient, but I can't figure it out.

I set up ApolloClient like this (based on this tutorial https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/fetch-data-with-apollo):

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
    fetchOptions: {
        credentials: 'include'
    }
});

When building, an error about fetch occurs so I modified the code (based on Using ApolloClient with node.js. "fetch is not found globally and no fetcher passed"):

import ApolloClient from 'apollo-boost';
import { fetch } from 'node-fetch'

const client = new ApolloClient({
    fetch: fetch,
    fetchOptions: {
        credentials: 'include'
    }
});

The build succeed, but my GraphQL call returns error graphql error only absolute urls are supported, so I tried to modified the code like this:

import ApolloClient from 'apollo-boost';
import { fetch } from 'node-fetch'

const client = new ApolloClient({
    fetch: fetch,
    fetchOptions: {
        credentials: 'include'
    },
    uri: `https://${shopOrigin}/admin/api/2019-10/graphql.json`
});

The error now occurs to be Network Error: Failed to Fetch with a CORS issue.

Could anyone help me resolved the problem? Please let me know if you need more information.

Issue fixed! I reset the code and tried it again today, only updated modules and added `fetch: fetch`, then it works fine this time, not sure what's the problem last week. — May Lee, Jan 06 '20 at 02:56

score 0 · Answer 1 · answered May 09 '20 at 21:28

The Shopify tutorial suggests using isomorphic-fetch for the server side. I tried including it in the Next.js side and the build went successful.

In my _app.js

require('isomorphic-fetch');
import ApolloClient from 'apollo-boost';

...

const client = new ApolloClient({
  fetchOptions: {
    credentials: 'include'
  },
});

Shopify app with GraphQL failed to work when developing on Heroku

1 Answers1