Apollo-client: Errors lost on cached results

[joepuzzo]

I'm using apollo and react to call a query that returns mixed results: error(s) and some data.
In order to handle the errors, but still be able to use the information given, I'm using the errorPolicy: "all" option in the query.

<Query query={query} variables={variables as any} errorPolicy='all'>
    {({loading, error, data}) => { ... }}
</Query>

The first time I mount the component data is populated with the partial informations and error with the errors returned by the query. If I change the route (unmounting the component) and then return on it, it shows the cached partial data but no errors, so I'm not able to handle errors anymore and detect that these are partial informations.

Intended outcome:
The component shows me the original errors along with the cached data.

Actual outcome:
The props error is undefined, the partial data are passed as if the query didn't return any error.

How to reproduce the issue:
Create a query that returns both data and error.

Version

"react-apollo": "2.5.2",
"apollo-client": "^2.5.1",

Reference to docs:

From the docs ^^^^^

https://www.apollographql.com/docs/react/features/error-handling

If this issue looks familiar thats because i stole part of the description from here. An issue that was previously opened and then closed.

Im not sure why that issue was closed as a solution to the original issue was never found.

Note: I am NOT using SSR, i'm simply using the in meme cache.

[hwillson]

@joepuzzo Any chance you could create a small runnable reproduction that demonstrates this happening?

[joepuzzo]

I will try to throw a code sandbox together and get back to ya!

[joepuzzo]

@hwillson Ok ive got two sandboxes for ya!

https://codesandbox.io/s/w7qy5m1pw7 << UI using apollo client
https://codesandbox.io/s/5wlv3jlywn << Server using apollo server

A couple things to note:

1. The following parameters seem to have NO affect on the policies.. you MUST put the param on the <Query> component.

defaultOptions: {
    watchQuery: {
      errorPolicy: "all"
    },
    query: {
      errorPolicy: "all"
    },
    mutate: {
      errorPolicy: "all"
    }
  }

1. Putting errorPolicy="all" on the query makes it so the cacheing takes place ( the request is made every time other wise (i find this to be incorrect).

[joepuzzo]

To reproduce: Go to the home page and refresh the browser. Then navigate to the dog page. You will see an error. Then navigate back to home and then back again to dog the error was not cached and there was obviously no re attempt to get the data again <<< which would also be a nice feature.

[TheoBr]

I think this might be related to another bug in react-apollo around the onError prop not firing when errorPolicy='all'.

I suspect that both of these are caused by hasError in QueryObservable returning false if policy === 'none': https://github.com/apollographql/apollo-client/blob/905001e40cfadf841aa5a78aa428ab09f8cdf108/packages/apollo-client/src/core/ObservableQuery.ts#L56

I hope to file the PR myself, but I want to understand this design decision before I do. The distinction between result.error and result.errors is unclear at best and in this context, the role of errorPolicy="all" is confusing

[tobobo]

@hwillson I also have a reproduction for this case: https://codesandbox.io/s/qqqzp95vq9 , which I originally posted in this thread https://github.com/apollographql/apollo-client/pull/4237

[joepuzzo]

@benjamn Any updates / Comments on this issue. Does the reproduction i created accurately show the problem?

[joepuzzo]

@hwillson is the reproduction enough to highlight this issue? Is there anything else I can do?

[joepuzzo]

If I could at least get a confirmation that this is in-fact a bug and not something I'm doing wrong that would be greatly appreciated...

[joepuzzo]

@benjamn @hwillson I really don't mean to put pressure but I would really appreciate an update on this OR at the very least a confirmation that its a real issue.

[joepuzzo]

This was marked as hasProduction two months ago and nothing has been said? I want to assume i'm doing something wrong seeing as this seems like a large overlooked issue but I don't think I am.

[dumaron]

I think that this is a regression, and not of apollo-client but in react-apollo. I've opened this issue some times ago to talk about this bug, but it was closed since this pull request was merged in master, fixing the problem (at least, I wasn't able to reproduce it anymore).

Now I'm experiencing the same problem again. Also, other issues are being opened in those days to report similar behaviours. I can't say the version since the bugfix stopped being effective; I'm doing myself some debug, but sadly the time I can give to this process is very limited.

My proposal is to close this issue, close the other ones in apollo-client and start again in react-apollo, opening a new issue or re-opening mine.
I'll try to do my best; if anyone has time to spend on it, I think that a good start can be check the code in the merged pull request.

[sergelerner]

FYI
I've recreated @joepuzzo sandbox from above, with latest apollo versions, together with @apollo/react-hooks, using useQuery, the problem remains.

https://codesandbox.io/s/apolloerrorissue1withhooks-moee3
once you navigate to the "dog" path, second time, error disappears.

@hwillson , any news on caching errors?

[PavelStsiapanau]

any updates?

[PinkyJie]

I think this is a critical issue, without this cached error, there is no way to do error handling correctly. Error can only be showed once and once you navigate way and come back, the error is gone.

[gtavidian]

any updates on this? did someone come up with a work around?

[dannycochran]

I think this workaround works, at least with the default error policy. I think with some error policies onComplete would fire, so you'd reset your error when it could still exist. You could probably fix this to work with any error policy, you just would need to check what type it is.

import { OperationVariables } from 'apollo-client';
import { useQuery, QueryHookOptions } from '@apollo/react-hooks';

export const useWrapperQuery = <TData = any, TVariables = OperationVariables>(
  graphQlQuery: DocumentNode,
  options?: QueryHookOptions<TData, TVariables>
): QueryResult<TData> => {
  const [cachedError, setCachedError] = useState<ApolloError | undefined>();
  const queryResults = useQuery(graphQlQuery, {
    ...options,
    onCompleted: data => {
      options?.onCompleted?.(data);
      // here you might need to check your options.errorPolicy
      setCachedError(undefined);
    },
    onError: error => {
      options?.onError?.(error);
      setCachedError(error);
    },
  });
  return {
    ...queryResults,
    error: cachedError,
  };
};

[KosGrillis]

Can we expect this to be fixed by the Apollo team? Are there any workarounds for hook-based queries?

[lifeiscontent]

Ping @hwillson any updates here?