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

[sandorvasas]

Occasionally this just keeps popping up in our bugsnag reports from production. There are no errors returned from the the graphql server. I can't reproduce it, since it's so rare, but really annoying and a serious issue in production. Error logs show that the request with its parameters is returned + networkError: {}. Not very useful.

Chrome
browserVersion
72.0.3626
osName
Windows 10.0

client:

    "apollo-cache-inmemory": "1.2.9",
    "apollo-cache-redux": "0.1.0",
    "apollo-client": "2.4.1",
    "apollo-link": "1.2.2",
    "apollo-link-error": "1.1.0",
    "apollo-link-http": "1.5.4",
    "apollo-link-ws": "1.0.7",
    "apollo-upload-client": "8.1.0",

    "react-apollo": "2.1.11",

server:

    "apollo-server-core": "^1.3.5",
    "apollo-server-koa": "^1.3.5",
    "apollo-server-module-graphiql": "^1.3.4",
    "apollo-upload-server": "5.0.0",

[pljeskavica]

I used to have a ton of reports with this issue. I never could reproduce it reliably but I came up with a solution that helped reduce the number of instances (or atleast reports by a ton). Also I dont think that this is a react-apollo issue because react-apollo is really providing things like the higher order component or the Query component.

This is an example of my apolloClient with the solution:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = new HttpLink({
  uri: `${getAPIServer()}/graphql`,
  credentials: 'include',
});

const errorLink = onError(error => {
  const { graphQLErrors = [], networkError = {}, operation = {}, forward } =
    error || {};
  const { getContext } = operation || {};
  const { scope, headers = {} } = getContext() || {};
  const { message: networkErrorMessage = '' } = networkError || {};
  const networkFailed = message =>
    typeof message === 'string' &&
    message.startsWith('NetworkError when attempting to fetch resource');

  if (networkFailed(networkErrorMessage)) return forward(operation);
});

const link = errorLink.concat(httpLink);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

export default client;

All it really does is retry failures that look like this less than helpful failed to fetch error.

[FredyC]

I had some of those before too, then I just dropped apollo-link-retry in there and these errors are pretty much gone.

[twdrake-ap]

I'm experiencing this issue. Adding apollo-link-retry did not resolve the issue. I haven't been able to track down what the issue is, can't reproduce.

[hwillson]

Definitely annoying, but it doesn't sound like there is much we can do to help with this in react-apollo. Thanks!

[twdrake-ap]

My issue was resolved after we removed a specific port number from our api endpoint and started using forwarding from a default port. I believe the issue was that some networks were rejecting the specification of a non standard port.

[pitops]

Guys come on this is ridiculous. Is there any workaround? Its so random I cannot track it. Why is this thread closed?

[mbarmettler]

@pitops check this out: https://www.prisma.io/blog/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d

[kltdwrds]

This can happen when a client loses its network connection while apollo is polling / refetching. I've experienced this firsthand, and a momentarily dropped connection was the root cause. It's easy to reproduce locally:

  const { loading, error, data } = useQuery({
    pollInterval: 5000
  })

Load the page, manually disconnect from your network, then wait for the next fetch - you should see Network Error: Failed to Fetch in the browser console.