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.
cross-fetchYes, 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-fetchYes, I agree the docs is misleading.
By the way, with typescript and node,cross-fetchjust works well without any manual workaround setting like providing custom module definition. That's because it follows standard whatwg fetch spec, whilenode-fetchdoesn't.import fetch from 'cross-fetch' const httpLink = new HttpLink({ uri: "<your-uri>", fetch, })
This did work in fact! Thanks :+1:
Most helpful comment
Consider
cross-fetchYes, I agree the docs is misleading.
By the way, with typescript and node,
cross-fetchjust works well without any manual workaround setting like providing custom module definition. That's because it follows standard whatwg fetch spec, whilenode-fetchdoesn't.