web-dev-qa-db-ja.com

node.jsでApolloClientを使用します。 「フェッチがグローバルに見つからず、フェッチャーが渡されませんでした」

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で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"
  }
}
node.jspolyfillsapollo-client
17
Nathan

apollo-boostライブラリによって提供されるApolloClientは、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(),
})
22
Nathan

Node.jsでApollo Boostを引き続き使用したいが、ブラウザーのネイティブフェッチAPIをポリフィルする必要がある場合は、 cross-fetch を試してください。 here の最小限の例で使用しました。そして、それはそれをインストール後に使用する方法です：

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

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

apollo-boostからfetchに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でテスト済み

3
vinboxx

whatwg-fetch ポリフィル：

yarn add whatwg-fetch

インストール手順は、使用方法（Babel、Webpackなど）によって異なり、提供されているリンクにあります。

私の場合、Jestテストにポリフィルが必要だったので、テストセットアップファイルにこれを追加しました。

import 'whatwg-fetch';
2
dspacejs