Replace unfetch/node-fetch recommendation with cross-fetch (#6280)

The `node-fetch` types aren't fully compatible with AC3, leading to
TS compiler errors in some cases (for the full backstory, see
apollographql/apollo-link#513).
`cross-fetch` addresses these type issues (while still using
`node-fetch` under the hood), and also supports older browsers
as well. This means we can recommend the use of `cross-fetch`
instead of both `unfetch` and `node-fetch`. This PR updates our
docs and code checks accordingly.

docs/source/api/link/apollo-link-batch-http.mdx

@@ -39,7 +39,7 @@ The batching options indicate how operations are batched together, the size of b
 
 ## Fetch polyfill
 
-The batch HTTP link relies on having `fetch` present in your runtime environment. If you are running on react-native, or modern browsers, this should not be a problem. If you are targeting an environment without `fetch` such as older browsers or the server however, you will need to pass your own `fetch` to the link through its options. We recommend [`unfetch`](https://github.com/developit/unfetch) for older browsers and [`node-fetch`](https://github.com/bitinn/node-fetch) for Node.
+The batch HTTP link relies on having `fetch` present in your runtime environment. If you are running on react-native, or modern browsers, this should not be a problem. If you are targeting an environment without `fetch` such as older browsers or the server however, you will need to pass your own `fetch` to the link through its options. We recommend using [`cross-fetch`](https://www.npmjs.com/package/cross-fetch) for older browsers and Node.
 
 ## Context
 

docs/source/api/link/apollo-link-rest.md

@@ -362,7 +362,7 @@ const link = new RestLink({
 Here is one way you might customize `RestLink`:
 
 ```js
-import fetch from 'node-fetch';
+import fetch from 'cross-fetch';
 import * as camelCase from 'camelcase';
 import * as snake_case from 'snake-case';
 

docs/source/data/fragments.md

@@ -215,7 +215,7 @@ If your schema includes only a few unions and interfaces, you can probably speci
 The following example script translates a GraphQL introspection query into a `possibleTypes` configuration object:
 
 ```js
-const fetch = require('node-fetch');
+const fetch = require('cross-fetch');
 const fs = require('fs');
 
 fetch(`${YOUR_API_HOST}/graphql`, {

docs/source/networking/advanced-http-networking.md

@@ -131,7 +131,7 @@ The `HttpLink` constructor accepts the following options:
 
 #### Providing a `fetch` replacement for certain environments
 
-`HttpLink` requires that `fetch` is present in your runtime environment. This is the case for React Native and most modern browsers. If you're targeting an environment that _doesn't_ include `fetch` (such as older browsers or the server), you need to pass your own `fetch` to `HttpLink` via its [constructor options](#constructor-options). We recommend [`unfetch`](https://github.com/developit/unfetch) for older browsers and [`node-fetch`](https://github.com/bitinn/node-fetch) for Node.js.
+`HttpLink` requires that `fetch` is present in your runtime environment. This is the case for React Native and most modern browsers. If you're targeting an environment that _doesn't_ include `fetch` (such as older browsers or the server), you need to pass your own `fetch` to `HttpLink` via its [constructor options](#constructor-options). We recommend using [`cross-fetch`](https://www.npmjs.com/package/cross-fetch) for older browsers and Node.
 
 ### Overriding options
 

package.json

@@ -84,12 +84,12 @@
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
     "bundlesize": "0.18.0",
+    "cross-fetch": "3.0.4",
     "fetch-mock": "7.7.3",
     "graphql": "14.6.0",
     "jest": "24.9.0",
     "jest-junit": "8.0.0",
     "lodash": "4.17.15",
-    "node-fetch": "2.6.0",
     "prop-types": "15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/link/http/checkFetcher.ts

@@ -2,19 +2,17 @@ import { InvariantError } from 'ts-invariant';
 
 export const checkFetcher = (fetcher: WindowOrWorkerGlobalScope['fetch'] | undefined) => {
   if (!fetcher && typeof fetch === 'undefined') {
-    let library: string = 'unfetch';
-    if (typeof window === 'undefined') library = 'node-fetch';
-    throw new InvariantError(
-      '"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/${library}), instantiate the ` +
-      'fetcher, and pass it into your `HttpLink` constructor. For example:' +
-      '\n\n' +
-      `import fetch from '${library}';\n` +
-      "import { ApolloClient, HttpLink } from '@apollo/client';\n" +
-      'const client = new ApolloClient({\n' +
-      "  link: new HttpLink({ uri: '/graphq', fetch })\n" +
-      '});'
-    );
+    throw new InvariantError(`
+"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 })
+});
+    `);
   }
 };