Question

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

背景：我有一个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()来执行此操作，还是应该完全更改实现？谢谢！

Answer 1

如果需要使用自定义提取程序，则无法使用ApolloClient中的

apollo-boost组件。然后必须使用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()
});

Answer 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
})

如何将提取程序传递给ApolloClient（）？

2 个答案: