-
Notifications
You must be signed in to change notification settings - Fork 344
Using node-fetch with apollo-link-http #513
Comments
What happens if you use
|
@dejayc It gives same error when createHttpLink is used. Actually, I figured out the problem. The node-fetch 2.x is not compatible with apollo-link. The signature of fetch is different. |
Ah, I guess you can duck punch it. |
I came across this issue today in my isomorphic app. I don't totally agree with global fetch being the default fallback especially in these days of SSR, but at least the error was somewhat informative:
My solution was either to conditionally use So...
|
@jmca The way you suggested for TypeScript worked for me! Thanks!! |
I ran into this issue today, and find out we are not compatible with I start using |
(Follow up on May 7, 2018:
While import { HttpLink } from 'apollo-boost'
import fetch from 'isomorphic-fetch'
const link = new HttpLink({
fetch
}) |
The npmjs.com documentation encourages users to use node-fetch but doesn't specify which version. How can we update that documentation? Note: using |
Has there been any movement on this? Using
|
If someone opens a PR that includes the right type definitions that will work with all of the fetch implementations but maintains some type checking, please @stubailo me and I'll try to merge! |
using HttpLink is optional, this works for me: import ApolloClient from 'apollo-boost'
import 'isomorphic-fetch'
const client = new ApolloClient({
uri: 'endpoint-url-here'
}) |
Any news on this ? node-fetch still causes issues with apollo-link and TS. |
Any news? Still getting issues with |
A workaround for this is to not install To do this, add the following to any // real node-fetch types clash with apollo-link-http, so manually define it as globalfetch here.
declare module 'node-fetch' {
const fetch: GlobalFetch['fetch'];
export default fetch;
} |
You can just use an |
Sure but what is the point of installing the types at all, if you're just gonna force cast it to something else eitherway? |
Sorry, I misread what you were doing, ignore my previous comment. However, this requires you modify your tsconfig to target the browser, as GlobalFetch is only provided if you have "dom" as an entry in the "lib" field: #273 (comment) Secondly, instead of manually modifying a |
It's just a workaround that works for me 🤷♀️, but I realise it's far from perfect (keyword: workaround). I think a good solution would be to just change the typing to a union of |
https://www.npmjs.com/package/whatwg-fetch states pretty explicitly that "This project doesn't work under Node.js environments. It's meant for web browsers only. You should ensure that your application doesn't try to package and run this on the server." Yes, someone really ought to fix the bug properly by fixing the types. |
Upon further review, this seems to be mainly a problem with |
Okay, |
@grantwwu Sorry, things are pretty hectic in the rundown to GraphQL Summit, but we've recently started using an |
(We'll probably want to separate out the global fetch exports though) |
I've just done an
|
I managed to get this to work in my test:
|
It's still not working for me :/
@jacobtani which versions of apollo-http-link and apollo-env did you use? Also, this is with node, right? |
Yes, same here. Using apollo-env does not solve the issue for me.
|
@grantwwu : I use I use yarn for dependency management in my app |
I switched to graphql-request for my project. |
@jacobtani What does your tsconfig look like? |
I ended up overriding it like this and it worked
I'm using this from node using this
|
PLEASE PATCH THE DOCS APOLLO TEAM! This issue is over a year old |
@rlancer I assume this is the case because as mentioned above your comment, it is not fixed yet since |
@JoviDeCroock There are solutions that work, docs should indicate to use them as opposed to one that fails and forces people to Google for workarounds. |
@JoviDeCroock both |
Well, I personally never use these. If you can point me to a solution I'd gladly pr |
I guess by making these 2 types the same should work.
|
@jmca Thanks man, you saved my day, got head bang got problem self is undefined in new createUploadLink while using jest testing. |
@tafelito Thanks for your solution, it was very helpful, but I think the real error was found and it is due to the new TypeScript update. In its 3.6 version, Here is the link |
To echo the above comment, my repo has to stick with typescript |
I've been able to fix it using only the second part, thanks @tafelito |
same issue. "@types/node-fetch": "^2.5.0",
"typescript": "^3.5.1"
"node-fetch": "^2.6.0", error TS2345: Argument of type '{ uri: 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>'.
Types of parameters 'url' and 'input' are incompatible.
Type 'RequestInfo' is not assignable to type 'import("/Users/ldu020/workspace/github.com/mrdulin/apollo-graphql-tutorial/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.
8 const link = new HttpLink({ uri: 'http://localhost:3000', fetch }); |
I have same problem in my application. I solve casting to
|
ultimately the problem is that the // copied directly from the @types/node-fetch
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/node-fetch/index.d.ts
Request {
...
// node-fetch extensions to the whatwg/fetch spec
agent?: Agent | ((parsedUrl: URL) => Agent);
compress: boolean;
counter: number;
follow: number;
hostname: string;
port?: number;
protocol: string;
size: number;
timeout: number; so compiler errors are inevitable if you don't downcast or create new typings that omit these additions. i chose to downcast import nodeFetch from 'node-fetch'
import { WhatWgFetch } from '../src/interfaces' // export type WhatWgFetch = typeof fetch
const fetch = (nodeFetch as unknown) as WhatWgFetch it's not great, but node-fetch != fetch, which ...grumbles... is misleading. |
This might be completely irrelevant ... but ... had the same issue for the last day or so...only to realize that 'fetch' is something that is available in the browser, but not on the server-side. If your application is going to be doing fetching from the browser, it's kind of pointless to pre-render the connection on the server-side. In my case, using NextJS, I changed the component that needed the http-link to not be rendered on the server-side as per https://nextjs.org/docs#with-no-ssr |
I was having the same problem, instead of installing |
I managed to get this working with isomorphic-fetch package.json (all version selected for compatibility with that used by appsync)
.../typings/index.d.ts
tsconfig.json
code
|
Consider
|
`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.
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.
Using HttpLink with node-fetch gives following error
Intended outcome:
According to the documentation the above should have compiled.
Actual outcome:
How to reproduce the issue:
Following versions are used to write above code.
Use the above versions and create the instance of HttpLink in typescript to see the above error.
The text was updated successfully, but these errors were encountered: