Node.js: '"fetch" has not been found globally and no fetcher has been configured.'

[RyanSea]

Intended outcome:

I'm unable to get Apollo to run at all, starting with Getting Started from the docs. (I'm not intending to run Apollo in a browser) First, I had to change const {ApolloClient} = requirerequire("@apollo/client"); into const {ApolloClient} = requirerequire("@apollo/client/core");, because it gave errors since I wasn't running react (see: Apollo Issue #7005 )

Here is the code I'm running, it's from Getting Started in the docs:

const {
    ApolloClient,
    InMemoryCache,
    HttpLink,
    ApolloProvider,
    useQuery,
    gql
  } = require("@apollo/client/core");

const client = new ApolloClient({
    uri: 'https://48p1r2roz4.sse.codesandbox.io',
    cache: new InMemoryCache()
});

const {ApolloClient} = requirerequire("@apollo/client");
client
  .query({
    query: gql`
      query GetRates {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));

Actual outcome:

Getting this error:

/Users/Ryan/lens/node_modules/@apollo/client/link/http/http.cjs:121
        throw __DEV__ ? new globals.InvariantError("\n\"fetch\" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:\n\nimport fetch from 'cross-fetch';\nimport { ApolloClient, HttpLink } from '@apollo/client';\nconst client = new ApolloClient({\n  link: new HttpLink({ uri: '/graphql', fetch })\n});\n    ") : new globals.InvariantError(20);
        ^

Invariant Violation: 
"fetch" has not been found globally and no fetcher has been configured. To fix this, install a fetch package (like https://www.npmjs.com/package/cross-fetch), instantiate the fetcher, and pass it into your HttpLink constructor. For example:

import fetch from 'cross-fetch';
import { ApolloClient, HttpLink } from '@apollo/client';
const client = new ApolloClient({
  link: new HttpLink({ uri: '/graphql', fetch })
});

    at new InvariantError (/Users/Ryan/lens/node_modules/ts-invariant/lib/invariant.js:16:28)
    at checkFetcher (/Users/Ryan/lens/node_modules/@apollo/client/link/http/http.cjs:121:25)
    at createHttpLink (/Users/Ryan/lens/node_modules/@apollo/client/link/http/http.cjs:194:9)
    at new HttpLink (/Users/Ryan/lens/node_modules/@apollo/client/link/http/http.cjs:301:39)
    at new ApolloClient (/Users/Ryan/lens/node_modules/@apollo/client/core/core.cjs:1838:19)
    at Object.<anonymous> (/Users/Ryan/lens/lens.js:10:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
  framesToPop: 1
}

How to reproduce the issue:

This is an otherwise empty repository. See versions

Versions

System: OS: macOS 11.2 Binaries: Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm Browsers: Chrome: 99.0.4844.83 Safari: 14.0.3 npmPackages: @apollo/client: ^3.5.10 => 3.5.10

[Cat-Lord]

Are you using node to run your example ? I got the same error using ts-node and following the suggested solution from the error output works. It basically tells you that you don't have any fetch library available, thus are unable to perform fetch operations.

• install fetch library (e.g. cross-fetch)
• adjust configuration

import fetch from 'cross-fetch';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql,
  HttpLink
} from "@apollo/client";

// move URI into the link
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({ uri: 'https://48p1r2roz4.sse.codesandbox.io', fetch })
});

client
  .query({
    query: gql`
      query GetRates {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));

Notice that we need to move the URI inside the link, see more info in the docs

[jpvajda]

👋 I'm going to close this one out as the suggestion from @Cat-Lord is the way to resolve this problem. Thanks for asking this question.