React-apollo: Uncaught Error: Network Error: Failed to Fetch

[kristojorg]

I am seeing some unfortunate uncaught errors in Chrome 55. I am making simple graphql queries using the HOC query component, but am getting errors. Not sure if the root of the problem is an actual timeout as shown, or if it is something else in react-apollo or apollo-client, but either way it seems like this should be handled more smoothly?

Any ideas how to begin debugging this?

Version

• apollo-client@N/A
• react-apollo@^1.2.0

[AdamYee]

Hi @kristojorg, I believe there is an ongoing struggle with error handling. See https://github.com/apollographql/react-apollo/issues/57.

But for your scenario:

• If you look in the debugger Network tab, what do you see?
• If you can, try to hit a break point in your render function and see if props.data.error has anything more revealing.

Feel free to ask any follow up questions in the react-apollo slack channel.

[townmulti]

This error seems to happen directly after the app loses connection or goes idle.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[dmarkow]

Having this happen too. Failed to Fetch errors when our users have left the page open for at least a couple minutes. Seems to never happen within the first 2 minutes of loading our page.

[townmulti]

@dmarkow
Catching the error seems to be how others are handling this.
Like in this closed issue:
https://github.com/apollographql/react-apollo/issues/758

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[trevordmiller]

We are getting these Network error: Failed to fetch errors from Apollo randomly. We don't have any related errors in the API. It seems to be when the user leaves the app open for a while; does Apollo have any bugs related to this when the user leaves an app open for a while?

[acomito]

@trevordmiller did you ever track this down? I'm wondering if it is just a loss of wifi/internet connection and that's the fetch lib's error?

[trevordmiller]

@acomito Nope, but it went away when we upgraded to Apollo 2 :)

[vicacid]

same issue v2.2.0

[webmobiles]

yes, having same problem oto with 2.2.0

[serranoarevalo]

Any workaround for this?

Edit:

The cause of my error was that I was passing a header with a null value on the configuration of my client:

js operation.setContext({ headers: { "X-JWT": localStorage.getItem("jwt") || null } });

As soon as I removed the null for "" react apollo started fetching normally.

js operation.setContext({ headers: { "X-JWT": localStorage.getItem("jwt") || "" } });

[hariantara]

@serranoarevalo Thank you , this is solve my problem

[corysimmons]

Might help others: I had the Chrome extension HTTPS Everywhere installed and enabled everywhere so it was trying to force http://localhost to be https which caused the problem.

Disabling it for localhost and navigating to http://localhost fixed it.

[CarlFMateus]

Good morning there is some solution for this problem I have tried in those ways and I can not give solution to this problem.
This is the problem
Error: Network error: Failed to fetch

[hariantara]

@CarlFMateus may I see your root code for integration with apollo and your query in HOC mode ?

[corysimmons]

Thank you Me-from-22-days-ago 🤗

[kasaiee]

I had this problem too with django as back-end, my front was ran on localhost:3000 but the django settings was:

# settings.py
CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:3000',
]

I changed the settings as bellow and error fixed.

CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:3000',
    'http://localhost:3000',
]