Changing local state reactive variable refetches the query via remote network request

[JayBee007]

Intended outcome:
Adding currently selected ids of a todo to a local state reactive variable (an array of ids) should update the local fields only.
For example: isSelected for every todo is calculated by checking todo.id in the local state reactive variable.

Actual outcome:
When adding the todo.id to the local state reactive variable, the remote query, which uses the @client directive for getting isSelected field of the todo, re-fetches the data via network request

How to reproduce the issue:
https://codesandbox.io/s/apollo-client-3-starter-forked-7i8wy

Versions

@apollo/client - 3.3.7
graphql - 14.7.0
react - 16.12.0
react-dom - 16.12.0
react-scripts - 3.0.1

[benjamn]

@JayBee007 The reason for the network request is that you're passing fetchPolicy: "network-only" to useQuery in src/hooks/useTodos.js. If you switch that option back to cache-first (the default), your cache updates will update the UI without making a network request (because reading from the cache succeeds).

You should also update to @apollo/client@3.3.8 (just published), which includes #7657, which fixes a bug in broadcasting reactive variable changes that was preventing cache-first from working correctly, in your reproduction.

Thanks to your reproduction, I'm confident this is fixed in v3.3.8, so I'll go ahead and close this issue, but please feel free to comment here if you're still having problems.