React-apollo: Multiply `useQuery` calls no longer always share updated results

Created on 19 Jul 2019  路  8Comments  路  Source: apollographql/react-apollo

Intended outcome:

With two separate calls to the same query, I expect if I refresh one of them, that the other query result is also updated

Actual outcome:

1 query updates, the other one doesn't. So far it seems to work for 1-2 requests, but at the 3rd it stops working, and the data desynchronizes.

How to reproduce the issue:

I call useQuery for the same query at 2 places.
I have 1 mutation, that will update the query content in cache, after mutation execute, through

          cache.writeQuery({
            query: q,
            variables: { id },
            data: { something: data.someMutation },
          })

Version

Latest Apollo 3 beta.
It worked fine on the previous beta.

reproduction-needed

Most helpful comment

Alright guys, will try to make that work this week. Things are a bit crazy here atm, wrapping up work before getting married and going on a holiday.

All 8 comments

Could you make codesandbox?

@patroza As mentioned in https://github.com/apollographql/react-apollo/issues/3262#issuecomment-515482856, is there any chance you could create a small runnable reproduction that demonstrates this?

Alright guys, will try to make that work this week. Things are a bit crazy here atm, wrapping up work before getting married and going on a holiday.

Congratulations @patroza! If you don't have time, no worries.

Hi I'm encountering similar issue here.

I have a <Query> and a <Mutation> which updates the values in the query after mutate call.
I was expecting <Query> to re-render with updated cache (it looks updated in devtool), but it does nothing.

I took a trace and I think this line is suspicious:
https://github.com/apollographql/react-apollo/blob/react-apollo%403.0.0/packages/hooks/src/data/QueryData.ts#L278

I tried to print some console log here, and I found that when Apollo cache was updated, this next function got run. However at the same time this.previousData.result.data had already been the same as next data, making the this.foreceUpdate() at L283 never reachable.

I'm not sure how this.previousData gets updated, but it seems the cause that block useQuery from triggering a re-render in my case.

This still seem to happen to me in 3.0.0 public release.

@zhusee2 Any chance you can put tougher a reproduction that shows this?

Sorry it's my bad. It looks like a part of my code tries to update cache in <Mutation>.
However the updater function mutates the cache directly, causing the issue I mentioned above.

Here's the ref about InMemoryCache becoming mutable, in case anyone needs it: apollographql/apollo-client#4543

We'll close this for now, but if anyone encountering this can supply a small runnable reproduction, we'll re-open. Thanks!

Was this page helpful?
0 / 5 - 0 ratings