search

apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.38k stars 2.66k forks source link

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

Closed JayBee007 closed 3 years ago

JayBee007 commented 3 years ago

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 commented 3 years ago

@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.