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

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"
  }
}

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

Does apollo-client work on node.js?, First, let's get all our files and dependencies in place. Create a folder called nodejs-apollo-client and open it in your terminal of choice. Now run npm init in your terminal to initialize NPM in the directory. Then execute the script below to install the dependencies. Ask apollo client authors to publish ESM package with "type": "module" field in package.json; Use workarounds in the source code; Use esm; Here's a workaround: import apolloClient from 'apollo-client'; const { ApolloClient } = apolloClient; Bonus: full example

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

Using Apollo to Query GraphQL from Node.js, In this tutorial, we will be using the Apollo Client 3.0 preview since it includes local state management Next, create an Apollo config file called apollo.config.​js . In this tutorial, we will use the Apollo client library within a Node.js Express app to provide a middleman to your third-party endpoint, without the need to rewrite your GraphQL queries and mutations. In addition to Apollo, there are several NPM libraries, like lokka and express-graphql, that we could use to abstract our third-party endpoint.

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

5. Connect your API to a client - Apollo Basics, -side library that leverages the power of a GraphQL API to handle data fetching and management for you, so that you can spend less time plumbing data and more on building your application. I am new to GraphQL and Apollo and I am really struggling with setting up an apolloClient in node.js. First I want to mention that I sucessfully set up an apollo client within nuxt using nuxt's apollo module. So I am completely sure that my endpoint and my token are working.

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';

Apollo Client 1.0: A flexible, community-focused JavaScript GraphQL , , and provides funding for the open source part of the project. Apollo Server is a library that helps you connect a GraphQL schema to an HTTP server in Node. Apollo Server works with any GraphQL schema built with GraphQL.js, so you can build your schema with that directly or with a convenience library such as graphql-tools.

A complete introduction to Apollo, the GraphQL toolkit, You can use Apollo Server with all popular JavaScript HTTP servers, including Express, Connect, Hapi, Koa, Restify, and Lambda. This server can be queried  If your app is browser based and you are using cookies for login and session management with a backend, it's very easy to tell your network interface to send the cookie along with every request. You just need to pass the credentials option. e.g. credentials: 'same-origin' as shown below, if your backend server is the same domain or else credentials: 'include' if your backend is a different domain.

Apollo Server, Intended outcome: execute normally in node environment. import ApolloClient from 'apollo-boost'; import fetch from 'node-fetch'; const uri I somehow check if we're running it in the browser/node.js environment and only  apollographql / apollo-client. Code Issues 397 Pull requests 70 Actions Projects 1 Security Insights. Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL

Build a GraphQL server with Node.js - Apollo Server, rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server - apollographql/apollo-client. It's the best way to build a production-ready, self-documenting GraphQL API that can use data from any source. You can use Apollo Server as: A stand-alone GraphQL server, including in a serverless environment; An add-on to your application's existing Node.js middleware (such as Express or Fastify) A gateway for a federated data graph

Comments
  • 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?
  • does it mean that we cannot use apollo-boost?
  • This worked for me using react native and Jest! Thanks
  • this is not working with React and Jest, do we have to make any other changes in jest config or so?
  • 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. 👍
  • This is exactly the solution that I come up with for Jest as well.
  • Thanks, works with next 9.1.4 and apollo-boost 0.4.4, too!
  • This works for me as well for the latest version (at this time) of Apollo boost