refetchQueries not working when using string array after mutation
See original GitHub issueIntended outcome: After a create mutation, I want to refetch the list query to have the newly added item be displayed in the list, making use of the variables which the list query is run with previously.
As per the documentation, this should be doable:
Please note that if you call refetchQueries with an array of strings, then Apollo Client will look for any previously called queries that have the same names as the provided strings. It will then refetch those queries with their current variables.
Actual outcome: When using the operation name as string in the refetchQueries array, no query is refetched, nothing is updated and no network activity is visible.
Versions
System:
OS: macOS Mojave 10.14.6
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.19.0 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
Browsers:
Chrome: 77.0.3865.90
Safari: 13.0.1
npmPackages:
@apollo/react-hooks: ^3.1.0 => 3.1.1
apollo-cache-inmemory: ^1.6.3 => 1.6.3
apollo-cache-persist: ^0.1.1 => 0.1.1
apollo-client: ^2.6.4 => 2.6.4
apollo-link: ^1.2.13 => 1.2.13
apollo-link-context: ^1.0.19 => 1.0.19
apollo-link-error: ^1.1.12 => 1.1.12
apollo-link-http: ^1.5.16 => 1.5.16
apollo-link-logger: ^1.2.3 => 1.2.3
react-apollo: ^3.1.2 => 3.1.2
Issue Analytics
- State:
- Created 4 years ago
- Reactions:47
- Comments:65 (8 by maintainers)
Top Results From Across the Web
Refetching queries in Apollo Client - Apollo GraphQL Docs
To selectively refetch queries outside of a mutation, you instead use the refetchQueries method of ApolloClient , which is documented here. client.
Read more >Issue with refetchQueries in the Apollo Client useMutation hook
I think I'm doing it correctly, but then I don't know why it's complaining about query not being part of it. Code import...
Read more >Fixing a Concurrency Bug by Awaiting Refetch Queries
... Use Error and Loading in the UI · Refetching Queries after Mutations · Exercise: Delete Habits with Refetching · Solution: Delete Habits...
Read more >Async data made simple with React Query - Hey! I'm Tyler
Another optional way of creating this “cache key”, is to pass it an array of strings. react-query will combine them into one string....
Read more >Advanced topics on caching - Client (React)
refetchQueries is the simplest way of updating the cache. With refetchQueries you can specify one or more queries that you want to run...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
In case anyone is still interested, this behavior happens because when you delete something, the component holding the original query didn’t get unmounted (normally because you just show a popup), while when creating a new item you redirect to another screen (i.e. create item page) unmounting the page holding the original query.
Apollo maintains a list of observable queries at any given time, which is based on which components are currently mounted that defined a query (i.e. through
<Query>...</Query>
oruseQuery
). When a component gets unmounted - at least in the React world - , Apollo removes it from the list of observable queries by callingQueryManager.tearDownQuery
when the component unmounts. DuringrefetchQueries
, when given a Query name string, apollo searches only the observable queries and because it can’t find it, it doesn’t execute a refeetch. If you provide a{ query: ..., variables: .. }
as a refetch value, Apollo bypasses this search and always executes the query you’ve given it, as if it was a completely new query (since it has the doc and the variables it needs to execute it)I don’t know if @hwillson would like to give us more context as to whether there is a way around this (except from not using the React or by making sure that we unmount as little as possible on crucial refetches).
In short:
refetchQueries
will only work with strings if the component that defined the original query is not unmounted. On the contrary, it will always work when using the{ query... , variables: ... }
style.The whole purpose of using a string is that you should NOT have to provide the exact object as Apollo should automatically refetch the query with the current query variables.