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

Question

我试图使用node.js服务器上的Apollo Client使用以下代码与另一个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中我需要填充或以其他方式提供fetch方法,但是我无法确定如何确定如何做这个.

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

任何人都可以提供一些示例代码来使用fetcher初始化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

事实证明,图书馆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 2

如果您仍想在Node.js中使用Apollo Boost但需要填充浏览器的本机fetch API,请尝试交叉提取.我在这里使用它作为我的最小例子.这就是安装后如何使用它:

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

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

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在节点中不使用 polyfill。

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

import fetch from 'cross-fetch'

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