How to Fix Bug in Apollo-link for GraphQL Error

Question

In here, I can both graphQLErrors and networkError:

  const errorLink = onError(({ operation, graphQLErrors, networkError, forward }) => {
    if (process.env.NODE_ENV !== 'production') {
      if (networkError) {
        console.log(`[Network Error]:`, networkError.message);
      }
      if (graphQLErrors) {
        graphQLErrors.forEach((error) => {
          console.log(`[GraphQL Error]:`, error.message);
        });
      }
    }
  });

but when trying to get these errors inside useQuery, at the component level, only networkError is returned while graphQLErrors is an empty array:

let { loading, error, data } = useQuery(GET_ALL_PROJECTS, {
 variables: { pageNum: 1, pageSize: 10 },
 fetchPolicy: 'network-only',
 });

For example, I get an error 403 to onError function from backend, but could not handle this error inside useQuery!

How to fix this issue??

It's not clear what you're asking here. Either there was a `networkError` or else the request was successful but there were `graphQLErrors`. A request would never return both. — Daniel Rearden, Jul 05 '20 at 08:08
Correct, I log both errors in the profile page, but graphQLErrors is empty and networkError throw Instead of graphQLError. — Mohammad Fallah, Jul 05 '20 at 10:49
That's the expected behavior. See [here](https://stackoverflow.com/questions/59465864/handling-errors-with-react-apollo-usemutation-hook/59472340#59472340). What exactly is your question? — Daniel Rearden, Jul 05 '20 at 11:50
This problem is open on the GitHub issues. Please see https://github.com/apollographql/apollo-link/issues/1285 — Mohammad Fallah, Jul 06 '20 at 04:12

score 0 · Answer 1 · answered Sep 02 '21 at 15:51

Apollo client passes either graphQLErrors or networkError forward, that's true. I believe it's under an assumption that when the network error happens, the GraphQL error in returned data is more technical and shouldn't be shown to the user. If you really want to access the additional error info sent by your server, you can actually access it in networkError.result.errors.

My code in typescript extracting the error:

const { networkError } = error
const networkGraphQLErrorsPresent =
  networkError &&
  "result" in networkError &&
  networkError.result.errors &&
  networkError.result.errors.length > 0
const extractedError =
  networkGraphQLErrorsPresent ?
    (networkError.result.errors[0] as GraphQLError) :
    undefined

How to Fix Bug in Apollo-link for GraphQL Error

1 Answers1