如何将 fetcher 传递给 ApolloClient()？

Posted 2023-03-10

【中文标题】如何将 fetcher 传递给 ApolloClient()？

【英文标题】：How to pass fetcher to ApolloClient()?

【发布时间】：2018-12-18 00:25:44

【问题描述】：

如何将node-fetch 的实例传递给从apollo-boost 导入的ApolloClient()？

背景：我有一个 React 应用程序，可以在开发服务器上本地运行。但是，当我部署到 Heroku 时，应用程序崩溃并记录以下内容：

fetch is not found globally and no fetcher passed, to fix pass a fetch for
2018-07-10T07:36:43.494156+00:00 app[web.1]: Error:
2018-07-10T07:36:43.494158+00:00 app[web.1]: your environment like https://www.npmjs.com/package/node-fetch.
2018-07-10T07:36:43.494159+00:00 app[web.1]: 
2018-07-10T07:36:43.494160+00:00 app[web.1]: For example:
2018-07-10T07:36:43.494162+00:00 app[web.1]: import fetch from 'node-fetch';
2018-07-10T07:36:43.494163+00:00 app[web.1]: import  createHttpLink  from 'apollo-link-http';
2018-07-10T07:36:43.494164+00:00 app[web.1]: 
2018-07-10T07:36:43.494165+00:00 app[web.1]: const link = createHttpLink( uri: '/graphql', fetch: fetch );
2018-07-10T07:36:43.494167+00:00 app[web.1]: at Object.checkFetcher (/app/node_modules/apollo-link-http-common/src/index.ts:175:11)
2018-07-10T07:36:43.494168+00:00 app[web.1]: at createHttpLink (/app/node_modules/apollo-link-http/src/httpLink.ts:44:3)
2018-07-10T07:36:43.494169+00:00 app[web.1]: at new HttpLink (/app/node_modules/apollo-link-http/src/httpLink.ts:238:11)
2018-07-10T07:36:43.494171+00:00 app[web.1]: at new DefaultClient (/app/node_modules/apollo-boost/src/index.ts:105:22)
2018-07-10T07:36:43.494172+00:00 app[web.1]: at Object.<anonymous> (/app/src/app/app.js:22:22)
2018-07-10T07:36:43.494173+00:00 app[web.1]: at Module._compile (module.js:652:30)
2018-07-10T07:36:43.494174+00:00 app[web.1]: at loader (/app/node_modules/babel-register/lib/node.js:144:5)
2018-07-10T07:36:43.494176+00:00 app[web.1]: at Object.require.extensions.(anonymous function) [as .js] (/app/node_modules/babel-register/lib/node.js:154:7)
2018-07-10T07:36:43.494177+00:00 app[web.1]: at Module.load (module.js:565:32)
2018-07-10T07:36:43.494178+00:00 app[web.1]: at tryModuleLoad (module.js:505:12)

我很确定我明白这里发生了什么。但是，我无法弄清楚在当前代码中应该如何以及在何处传递fetch，因为我正在使用ApolloClient()，因此在任何地方都没有触及createHttpLink()。我尝试将它与uri 一起传递，但没有任何改变：

import React,  Component  from 'react';
import ApolloClient from 'apollo-boost';
import  ApolloProvider  from 'react-apollo';
import fetch from 'node-fetch';
/* Some trivial imports & code omitted */


const apolloClient = new ApolloClient(
  uri: process.env.NODE_ENV === 'production'
    ? 'http://recoverwww-dev.herokuapp.com/graphql' : 'http://localhost:1337/graphql',
  fetch,
);

class App extends Component 

  render() 
    return (
      <ApolloProvider client=apolloClient>
        <div id="app">
          <Menu />
          <Header />
          <div id="content">
            <Router />
          </div>
          <Footer />
        </div>
      </ApolloProvider>
    );
  

是否有可能使用ApolloClient() 来做到这一点，还是我应该完全改变我的实现？谢谢！

【参考方案1】：

如果需要使用自定义提取器，则不能使用来自apollo-boost 的ApolloClient 组件。然后必须使用apollo-client 包创建组件。下面的代码是从 Apollo 的文档中粘贴的，附加了 node-fetch。

import  ApolloClient  from 'apollo-client';
import  InMemoryCache  from 'apollo-cache-inmemory';
import  HttpLink  from 'apollo-link-http';
import  onError  from 'apollo-link-error';
import  ApolloLink  from 'apollo-link';
import fetch from 'node-fetch';


const uri = 'address';


export default new ApolloClient(
  link: ApolloLink.from([
    onError(( graphQLErrors, networkError ) => 
      if (graphQLErrors)
        graphQLErrors.map(( message, locations, path ) =>
          console.log(
            `[GraphQL error]: Message: $message, Location: $locations, Path: $path`,
          ),
        );
      if (networkError) console.log(`[Network error]: $networkError`);
    ),
    new HttpLink(
      uri,
      credentials: 'same-origin',
      fetch,
    )
  ]),
  cache: new InMemoryCache()
);

【参考方案2】：

浏览器原生获取，但服务器没有。 试试这个：

import  createHttpLink  from 'apollo-link-http';
import fetch from 'node-fetch';

const link = createHttpLink(
      fetch,
      uri: 'uri',
    );

或者这个：

import  HttpLink  from 'apollo-boost'
import fetch from 'isomorphic-fetch'

const link = new HttpLink(
  fetch
)

【讨论】：

这就是错误消息和 Apollo 文档所说的。但是，我不知道在哪里传递fetch，因为我没有在任何地方使用createHttpLink()。所以问题是，我可以以某种方式将提取器传递给ApolloClient() 或<ApolloProvider>，还是我需要改变我的方法？为了清楚起见，我稍后会编辑原始帖子。谢谢！