How to access graphQLErrors in a component?

[gilbert]

Copying my issue from apollo-client since it might be more relevant here.

I'm trying to set up apollo to handle 401 errors in my apollo react component. Here's what I have so far.

My setup looks something like the following. On a 401, graphQLErrors is populated within the onError link. Good so far.

var link = ApolloLink.from([
  onError(({networkError, graphQLErrors}) => {
    graphQLErrors //=> Populated! This is good.
  }),
  new HttpLink({...})
])

However, when I receive the error in a react component, graphQLErrors is empty! The component looks like this:

export const USER_QUERY = gql`query {
  signed_in_user { id, name }
}`

const withUserData = graphql(USER_QUERY, {
  options: {
    errorPolicy: 'all'
  }
})

export default Component => withUserData( props => {
  var { data: { loading, error, self } } = props

  if (loading) return <div>Loading...</div>
  if (error) {
    error.graphQLErrors //=> Empty! :(
  }
  return <div>Loaded.</div>
})

Is there a way to pass the populated graphQLErrors array to the component? Thanks.

Version

• [email protected]

[webmobiles]

then only way that i've found it's save it on localstorage and read the error from this on the component

[gilbert]

If using localstorage is required, that's silly. Wasn't the whole point of 2.0 to make it easier to move data around the pipeline?

[gilbert]

Additionally, any window-based solution won't work on apps that render server-side too (next.js).

[majelbstoat]

I'd also like this, specifically to render a NotFound screen instead of, say, a profile screen, when I get a 404 back from the server. Pretty confused how it's supposed to work actually. I did basically exactly the same thing as @gilbert and expected exactly the same results. Spelunking didn't really tell me where exactly the error is failing to be attached, or is being removed. And, I'm using this with Next.JS, so a local storage solution doesn't work for me.

(And what is even supposed to be in props.data.error if not this kind of error?)

[JakeDawkins]

👋 I'm able to see graphql errors from within the component when getting both graphql errors and a 401 status code. Here's a CodeSandbox example: https://codesandbox.io/s/1y6zr2555l and a corresponding endpoint that causes the 401: https://glitch.com/edit/#!/lively-school?path=server.js:27:0

[deleemillie]

In case anyone else comes here wondering about this (since the snippet provided by JakeDawkins appears to be expired).

The graphQLErrors that appear in the 'onError' method initialised as part of the 'ApolloClient' setup actually appear within 'networkError' when handling under the Query or Mutation component. They exist under 'networkError.result.errors'.

[Agiledom]

I was stuck on this for a while and annemu's answer helped me out greatly. There are a bunch of other threads I've seen during my research that could benefit from this answer, as apollo does not make it overly clear on how to access these errors in its documentation.

Here's some example code:-

Component.js

  const [reqToken, { error, loading, data }] = useLazyQuery(LoginUser, {
    onError: error => console.log(error.networkError.result.errors),
// you could also add the onCompleted method here to handle the data.
  });

Apollo-Client.js

// httpLink, refreshLink, authLink above ^

  const errorLink = onError(({ graphQLErrors, networkError }) => {
    console.log(graphQLErrors);
    console.log(networkError);
  });

  return new ApolloClient({
    ssrMode: typeof window === "undefined", // Disables forceFetch on the server (so queries are only run once)
    link: ApolloLink.from([refreshLink, authLink, errorLink, httpLink]),
    cache: new InMemoryCache().restore(initialState)
  });