Apollo-client: Add a note to the documentation explaining how to use `node-fetch` with `apollo-link-http`

Created on 23 May 2019  路  2Comments  路  Source: apollographql/apollo-client

The documentation recommends using node-fetch as your data-fetching tool when you are running node. Unfortunately, when you try to use node-fetch in a TypeScript project with apollo-link-http, you see this error:

error TS7016: Could not find a declaration file for module 'node-fetch'. '/Users/mae.capozzi/Desktop/Codes/project/packages/client/node_modules/node-fetch/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/node-fetch` if it exists or add a new declaration (.d.ts) file containing `declare module 'node-fetch';`

8 import fetch from 'node-fetch';

If you install @types/node-fetch, you see this error:

error TS2345: Argument of type '{ uri: string | undefined; credentials: string; fetch: typeof fetch; }' is not assignable to parameter of type 'Options'.
  Types of property 'fetch' are incompatible.
    Type 'typeof fetch' is not assignable to type '{ (input: RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<Response>; }'.
      Types of parameters 'url' and 'input' are incompatible.
        Type 'RequestInfo' is not assignable to type 'import("/Users/mae.capozzi/Desktop/Codes/project/node_modules/@types/node-fetch/index").RequestInfo'.
          Type 'Request' is not assignable to type 'RequestInfo'.
            Type 'Request' is missing the following properties from type 'Request': context, compress, counter, follow, and 6 more.

 21     new HttpLink({
                     ~
 22       uri: process.env.GRAPHQL_SERVER_ENDPOINT,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 24       fetch,
    ~~~~~~~~~~~~
 25     }),

A workaround to this problem can only be found by combing through Github solutions. I think we should point out how to workaround this issue in the docs.

Most helpful comment

Consider cross-fetch

Yes, I agree the docs is misleading.
By the way, with typescript and node, cross-fetch just works well without any manual workaround setting like providing custom module definition. That's because it follows standard whatwg fetch spec, while node-fetch doesn't.

import fetch from 'cross-fetch'

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

All 2 comments

Consider cross-fetch

Yes, I agree the docs is misleading.
By the way, with typescript and node, cross-fetch just works well without any manual workaround setting like providing custom module definition. That's because it follows standard whatwg fetch spec, while node-fetch doesn't.

import fetch from 'cross-fetch'

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

Consider cross-fetch

Yes, I agree the docs is misleading.
By the way, with typescript and node, cross-fetch just works well without any manual workaround setting like providing custom module definition. That's because it follows standard whatwg fetch spec, while node-fetch doesn't.

import fetch from 'cross-fetch'

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

This did work in fact! Thanks :+1:

Was this page helpful?
0 / 5 - 0 ratings