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

Question

I am attempting to use an Apollo Client on a node.js server to interface with another GraphQL API using the following code:

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

Which yields the following error:

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)

I understand that the Apollo Client by default is expecting to be run in a browser context where a fetch method will be available, and that in a node.js I need to polyfill or otherwise provide a fetch method, but I having trouble figuring out exactly how to do this.

Following the example code at https://www.apollographql.com/docs/link/#apollo-client it appears that I should be able to pass this information in using the link option, and reading the apollo-boost source code seems to suggest that you can pass this information in using fetcherOptions, but neither of these solutions seem to work.

Can anyone provide some example code for initializing an Apollo Client in node.js with a fetcher?

For reference here is my 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"
  }
}

I tried all of the suggestions below, none of them works I would always get teh error `Invariant Violation: 1`... (or that self is undefined when using whatwg-fetch)... Is there another solution? — Merc, Aug 12 '19 at 10:31

Robin Wieruch · Answer 1 · 2019-09-01T02:40:19.123

39

If you still want to use Apollo Boost in Node.js but need to polyfill the native fetch API of the browser, try out cross-fetch. I used it for my minimal example over here. And that's how it can be used after installing it:

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

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

edited Sep 01 '19 at 02:40

answered Jun 06 '18 at 11:31

Robin Wieruch

10,245
6
68
90

2

This worked for me using react native and Jest! Thanks – Juan P. Ortiz Apr 08 '19 at 19:27
this is not working with React and Jest, do we have to make any other changes in jest config or so? – TechTurtle Sep 30 '19 at 18:51
1

Still getting `fetch is not globally and no fetcher passed...` – kwoxer Apr 28 '20 at 16:28
Solved the exact same error that jest showed to me. +1 :) – PeeKey Apr 26 '21 at 16:08

score 35 · Accepted Answer · answered Jun 04 '18 at 22:31

It turns out that the ApolloClient provided by the apollo-boost library does not accept a link option. Switching to use the vanilla apollo-client allows you to specify your fetching mechanism.

Although apollo-boost and apollo-client both export an ApolloClient in the docs, they take wildly different options.

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

Still not working, with this I get `undefined is not an object`. — kwoxer, Apr 28 '20 at 16:33

score 22 · Answer 3 · answered Aug 09 '19 at 08:53

22

You can add fetch option directly to the ApolloClient from apollo-boost. Here is the example code

Ref. 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
});

Tested with apollo-boost version 0.4.3

answered Aug 09 '19 at 08:53

vinboxx

516
6
11

1

THANK YOU ! I confirmed this also works with `@apollo/react-hooks` 3.1.0 and `apollo-boost` 0.4.4 inside `next`.js 9.0.5. – Hendy Irawan Sep 14 '19 at 07:05
This is exactly the solution that I come up with for Jest as well. – peter.babic Oct 16 '19 at 10:31
Thanks, works with next 9.1.4 and apollo-boost 0.4.4, too! – throbi Dec 11 '19 at 15:08
This works for me as well for the latest version (at this time) of Apollo boost – pizzae Dec 15 '19 at 03:38
Still not working, with this I get `undefined is not an object`. – kwoxer Apr 28 '20 at 16:30

score 6 · Answer 4 · answered Feb 01 '20 at 04:27

Try cross-fetch without a polyfill in node.

This even works with typescript. (conversely, node-fetch's type is incompatible with the standard whatwg fetch spec.)

import fetch from 'cross-fetch'

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

score 4 · Answer 5 · answered Aug 12 '18 at 12:36

You can use the whatwg-fetch polyfill:

yarn add whatwg-fetch

The installation instructions depend on your usage (e.g Babel, Webpack etc.) and are in the provided link.

In my case I needed the polyfill for my Jest tests so I just put this in my test setup file:

import 'whatwg-fetch';

score 0 · Answer 6 · answered Jun 21 '20 at 16:47

I had that exact error, but fortunately I had already included node-fetch in my project, so I have imported it and associated it to the Apollo client.:

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

and in my package.json this is what I have:

{
  "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",
    ...
  }
}

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

6 Answers6

Linked