在 Heroku 上开发时，使用 GraphQL 的 Shopify 应用程序无法运行答案

【问题标题】：Shopify app with GraphQL failed to work when developing on Heroku在 Heroku 上开发时，使用 GraphQL 的 Shopify 应用程序无法运行
【发布时间】：2020-04-21 21:34:24
【问题描述】：

我正在使用 Node.js 和 React 开发 Shopify 私有应用程序，并使用 GraphQL api 发出请求。当我在本地运行它并使用 NGROK 发布它时一切正常，但是当我将代码推送到 Heroku 时，会发生错误。好像是ApolloClient有问题，但是想不通。

我是这样设置ApolloClient的（基于本教程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'
    }
});

在构建的时候，出现了关于fetch的错误，所以我修改了代码（基于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'
    }
});

构建成功，但是我的 GraphQL 调用返回错误graphql error only absolute urls are supported，所以我尝试修改代码如下：

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`
});

现在发生的错误是 Network Error: Failed to Fetch，存在 CORS 问题。

谁能帮我解决这个问题？如果您需要更多信息，请告诉我。

【问题讨论】：

问题已解决！我重置代码，今天又试了一次，只更新了模块并添加了fetch: fetch，然后这次运行正常，不知道上周是什么问题。

标签： node.js heroku graphql shopify apollo-client

【解决方案1】：

Shopify 教程建议在服务器端使用 isomorphic-fetch。我尝试将它包含在 Next.js 端，构建成功。

在我的 _app.js 中

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

...

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

【讨论】：