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

Posted 2023-03-08

【中文标题】在 Heroku 上开发时，使用 GraphQL 的 Shopify 应用程序无法运行

【英文标题】：Shopify app with GraphQL failed to work when developing on Heroku

【发布时间】：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，然后这次运行正常，不知道上周是什么问题。

【参考方案1】：

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

在我的 _app.js 中

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

...

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