web-dev-qa-db-fra.com

Utilisation d'ApolloClient avec node.js. "fetch n'est pas trouvé globalement et aucun récupérateur n'est passé"

J'essaie d'utiliser un client Apollo sur un serveur node.js pour interfacer avec une autre API GraphQL en utilisant le code suivant:

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

Ce qui donne l'erreur suivante:

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)

Je comprends que le client Apollo s'attend par défaut à être exécuté dans un contexte de navigateur où une méthode fetch sera disponible, et que dans un node.js, je dois effectuer un polyfill ou autrement fournir un fetch méthode, mais j'ai du mal à savoir exactement comment procéder.

En suivant l'exemple de code à https://www.apollographql.com/docs/link/#apollo-client il semble que je devrais être en mesure de transmettre ces informations en utilisant le link et en lisant le apollo-boost le code source semble suggérer que vous pouvez transmettre ces informations en utilisant fetcherOptions, mais aucune de ces solutions ne semble fonctionner.

Quelqu'un peut-il fournir un exemple de code pour initialiser un client Apollo dans node.js avec un récupérateur?

Pour référence, voici mon 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

Il s'avère que le ApolloClient fourni par le apollo-boost la bibliothèque n'accepte pas l'option link. Passer à l'utilisation de Vanilla apollo-client vous permet de spécifier votre mécanisme de récupération.

Bien que apollo-boost et apollo-client les deux exportent un ApolloClient dans la documentation, ils prennent des options très différentes.

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

Si vous souhaitez toujours utiliser Apollo Boost dans Node.js mais devez polyfill l'API native fetch du navigateur, essayez cross-fetch . Je l'ai utilisé pour mon exemple minimal sur ici . Et voilà comment il peut être utilisé après son installation:

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

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

Vous pouvez ajouter l'option fetch directement à ApolloClient à partir de apollo-boost. Voici l'exemple de code

Réf. 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
});

Testé avec apollo-boost version 0.4.3

3
vinboxx

Vous pouvez utiliser le whatwg-fetch polyfill:

yarn add whatwg-fetch

Les instructions d'installation dépendent de votre utilisation (par exemple Babel, Webpack etc.) et se trouvent dans le lien fourni.

Dans mon cas, j'avais besoin du polyfill pour mes tests Jest, je l'ai donc mis dans mon fichier de configuration de test:

import 'whatwg-fetch';
2
dspacejs