Question

我正在尝试使用node.js服务器上的Apollo客户端使用以下代码与另一个GraphQL API进行交互：

import fetch from 'node-fetch'
import { createHttpLink } from 'apollo-link-http'

import ApolloClient from 'apollo-boost'
import { API_URL } from '...'

const client = new ApolloClient({
  link: createHttpLink({
    uri: API_URL,
    fetch: fetch,
  }),
})

产生以下错误：

module initialization error: Error
fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/node-fetch.

For example:
import fetch from 'node-fetch';
import { createHttpLink } from 'apollo-link-http';

const link = createHttpLink({ uri: '/graphql', fetch: fetch });
at Object.checkFetcher (/var/task/node_modules/apollo-link-http-common/lib/bundle.umd.js:78:19)
at createHttpLink (/var/task/node_modules/apollo-link-http/lib/bundle.umd.js:32:30)
at new HttpLink (/var/task/node_modules/apollo-link-http/lib/bundle.umd.js:203:38)
at new DefaultClient (/var/task/node_modules/apollo-boost/lib/index.js:80:24)

据我所知，默认情况下，Apollo客户端希望在浏览器上下文中运行，fetch方法可用，而在node.js中我需要填充或以其他方式提供{{1方法，但我无法弄清楚如何做到这一点。

按照https://www.apollographql.com/docs/link/#apollo-client处的示例代码，我似乎可以使用fetch选项传递此信息，并且阅读link源代码似乎表明您可以使用apollo-boost传递此信息，但这些解决方案似乎都不起作用。

任何人都可以提供一些示例代码，用于使用fetcher初始化node.js中的Apollo客户端吗？

此处参考的是我的fetcherOptions

package.json

Answer 1

如果您仍想在Node.js中使用Apollo Boost但需要填充浏览器的本机fetch API，请试用cross-fetch。我把它用作here以上的最小例子。这就是安装后如何使用它：

import 'cross-fetch/polyfill';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://api.domain.com/graphql',
});

Answer 2

事实证明ApolloClient库提供的apollo-boost不接受link选项。切换为使用vanilla apollo-client可以指定您的提取机制。

虽然apollo-boost和apollo-client都会在文档中导出ApolloClient，但它们会采用截然不同的选项。

import fetch from 'node-fetch'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

import ApolloClient from 'apollo-client'
import { API_URL } from '...'

const client = new ApolloClient({
  link: createHttpLink({
    uri: API_URL,
    fetch: fetch,
  }),
  cache: new InMemoryCache(),
})

Answer 3

您可以将fetch选项直接从ApolloClient添加到apollo-boost。这是示例代码

参考https://www.apollographql.com/docs/react/essentials/get-started/#configuration-options

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

const client = new ApolloClient({
    fetch: fetch
});

经过apollo-boost版0.4.3的测试

Answer 4

尝试cross-fetch，不要在节点中进行填充。

这甚至适用于打字稿。（相反，node-fetch的类型与标准的whatwg获取规范不兼容。）

import fetch from 'cross-fetch'

const httpLink = new HttpLink({
  uri: "<your-uri>",
  fetch,
})

Answer 5

您可以使用whatwg-fetch polyfill：

yarn add whatwg-fetch

安装说明取决于您的使用情况（例如Babel，Webpack等），位于提供的链接中。

在我的情况下，我需要在Jest测试中使用polyfill，所以我将其放在测试设置文件中：

import 'whatwg-fetch';

Answer 6

我遇到了确切的错误，但是幸运的是，我已经在项目中包含了node-fetch，所以我将其导入并将其关联到Apollo客户端。：

import fetch from 'node-fetch';
import ApolloClient from 'apollo-boost';
import {targetServer} from "./apiConstants";
import { gql } from "apollo-boost";

const client = new ApolloClient({
    fetch: fetch,
    uri: targetServer + '/graphql',
});

在我的package.json中，这就是我所拥有的：

{
  "name": "learn-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@apollo/react-hooks": "^3.1.5",
    "apollo-boost": "^0.4.9",
    "graphql": "^15.1.0",
    "next": "9.3.5",
    "node-fetch": "^2.6.0",
    ...
  }
}

将ApolloClient与node.js一起使用“在全球范围内找不到提取，也没有提取任何提取器”

6 个答案: