So, I am working on a project's feature that allows users to view data based on different variables, for example, data that are unique to years, location, gender etc.
Below is the code that I write:
this._querySubscription = this._apollo.watchQuery({
query: *some graphql query*,
variables: {
// this is where the variables are dump
}
})
.valueChanges
.subscribe(( { data, loading } ) => {
do something with the data
})
Now, don't worry about the error with the function and stuff because I have got everything right. I even have below code to handle cache and even evict.
let cache = this._apollo.client.cache as InMemoryCache
let data = this._apollo.client.cache.readQuery({
query: *some graphql query*,
variables: { *using the same variables as the writeQuery, of course*}
})
cache.evict({
fieldName: "*the fieldname from the query*",
broadcast: false,
});
this._apollo.client.cache
.writeQuery({
query: *some graphql query which is the same as above*,
data,
variables: {
*again, same variables*
}
})
Some of the things that I have come across are:
- Without using the
readQuery
andwriteQuery
, when running thewatchQuery
again, even with different variables to run the query will return the same data from the cache. - Using the
readQuery
,writeQuery
,evict
and running the second query with different variables will not return the same data from the cache (which I am looking for) but, if I try to run the first query back, the data return will be empty, probably because I modify the cache. 3.If you are thinking of usingfetchPolicy
when running the query, I have tried all 4fetchPolicy
,cache-first
,network-only
etc. It works if I usecache-network-only
but then somehow I have no idea how to wait for it completely finish making the request and updating the cache before I can update my UI.
Would really appreciate if you can help to solve this or maybe if you have other idea as a solution
Thanks.