将 ApolloClient 与 node.js 一起使用。 "fetch is not found globally and no fetcher passed"

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 Client 期望在浏览器上下文中运行，其中 fetch 方法可用，而在 node.js 中我需要polyfill 或以其他方式提供 fetch 方法，但我无法弄清楚具体如何执行此操作。

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

任何人都可以提供一些示例代码以在 node.js 中使用获取器初始化 Apollo 客户端吗？

参考这里是我的package.json

{
  "name": "API-Service",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {},
  "dependencies": {
    "apollo-boost": "^0.1.6",
    "apollo-link-http": "^1.5.4",
    "graphql": "^0.13.2",
    "babel-polyfill": "^6.26.0",
    "json-rules-engine": "^2.1.0",
    "node-fetch": "^2.1.2",
    "mysql": "^2.15.0"
  }
}

Answer 1

原来 apollo-boost 库提供的 ApolloClient 不接受 link 选项。切换到使用香草 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 2

如果您仍想在 Node.js 中使用 Apollo Boost，但需要填充浏览器的本机提取 API，请尝试 cross-fetch. I used it for my minimal example over here。这就是安装后的使用方式：

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

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

Answer 3

您可以使用 whatwg-fetch polyfill：

yarn add whatwg-fetch

安装说明取决于您的使用情况（例如 Babel、Webpack 等），并且在提供的 link.

中

在我的例子中，我的 Jest 测试需要 polyfill，所以我只是把它放在我的测试设置文件中：

import 'whatwg-fetch';

Answer 4

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

参考。 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 5

尝试 cross-fetch 在节点中不使用 polyfill。

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

import fetch from 'cross-fetch'

const httpLink = new HttpLink({
  uri: "<your-uri>",
  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 一起使用。 "fetch is not found globally and no fetcher passed"

Using ApolloClient with node.js. "fetch is not found globally and no fetcher passed"

node.js

polyfills

apollo-client