React-apollo: data property from useQuery having odd behaviour

[elkevinwolf]

Intended outcome:

It seems like the data property returned by the useQuery hook is having odd behaviour, take the following scenario:

1. User lands in the app, which renders a list of rss feeds.
2. When clicking on a rss feed, the app navigates to the feed page, which renders a loading skeleton while the feed entries are loaded.
3. User navigates to another feed, which also renders a loading skeleton while the feed entries are loaded.
4. User navigates back to the first feed, which renders a circular progress on top of the feed entries previously loaded.

Technical details

What I am doing is basically detect if query.loading === true and query.data === undefined in order to decide if I want to render the loading skeleton, if query.loading === true and query.data !== undefined, then I render the circular progress and if query.data !== undefined, then I render the list items.

Actual outcome (THE PROBLEM):

The main issue is that the query.data property is having odd behaviour, since it does not immediately relate to the query parameters I am sending, when I change from step 2 to step 3 of the above steps, then query.loading = true, but query.data remains in the same shape before the refetch, only updates when the date finishes fetching. Shouldn't it be undefined, just as in the first load?

How to reproduce the issue:

https://codesandbox.io/s/apollo-client-data-8y7p0

(on the above gif you will note that on the initial load, data is undefined, while on subsequent ones, data remains the same, even if loading = true and the query parameters had changed)

Version

• @apollo/react-hooks: 3.1.2

[elkevinwolf]

@kecoco16 discovered that if I useLazyQuery, then I get the intended behaviour: https://codesandbox.io/s/apollo-client-data-with-lazy-query-qq5uc

[Zoe7]

I'm also running into this issue. Looks to me like this is the same as people were reporting here: https://github.com/apollographql/react-apollo/issues/2202

[Titozzz]

This is effectively a duplicate of #2202, it's "funny" however that lazyQuery fixes it.

[harry-nguyen22]

@iamkevinwolf is right! Tested with useLazyQuery. Notice that if you are using polling then in new query you should call stopPolling first then call Query function. You will see the old data is empty!