CODEWITHSUNDEEP
reactjshttpapollo-client
user1261710
user1261710

Reputation: 2639

How do I differentiate between server errors and no network with ApolloGraphQl?

I am using the ApolloGraphQl library to fetch data from my backend. https://www.apollographql.com/docs/react/data/error-handling

In my React app, I want to show a 'you are offline' page when the network was disrupted.

const {
    data
    loading,
    error,
} = useQuery('my query', 'cache-and-network');

I can destructure the result to get the ApolloError. However, how can I know if the error is caused by no network?

I see that I can get a networkError (https://www.apollographql.com/docs/react/data/error-handling#network-errors) but it's usually a 4xx or 5xx error and not HTTP error code -1.

How will I know that I am getting an error due to no network?

Upvotes: 0

Views: 270

Answers (1)

Michel Floyd
Michel Floyd

Reputation: 20227

You can look at the networkError key of Apollo's error object.

Here's a function that you might find useful in interpreting Apollo errors:

import { ApolloError } from '@apollo/client/errors';

export const apolloErrorToStrings = (apolloError: ApolloError) => {
  const errorArray: Array<string> = [];
  let isNetworkError = false,
    isAuthenticationError = false;

  if (apolloError.graphQLErrors) {
    apolloError.graphQLErrors.forEach((error) => {
      errorArray.push(
        `${error.extensions?.code || 'unknown'}: ${error.message}`
      );
      if (error.extensions?.code === 'UNAUTHENTICATED')
        isAuthenticationError = true;
    });
  }
  if (apolloError.networkError) {
    errorArray.push('CONNECTION FAILED: Are you connected to the internet?');
    isNetworkError = true;
  }
  return { errorArray, isNetworkError, isAuthenticationError };
};

Upvotes: 1

Related Questions