I have this weird behavior that I’ve been wrapping my head around for the past couple of hours.
Let’s consider these two queries as examples:
A query that returns and array of authors
query Authors {
authors {
id
name
books {
code
name
}
}
}
and another query that returns a single author
query Author($id: ID!) {
author(id: $id) {
id
name
books {
code
name
}
}
}
In my UI, imagine we map through the list of authors and render a card for each author. When you click on the card, it redirects you to a new page that has data for the author you clicked on, thus also triggering the Author
query with an id.
Although I would expect the data for the single author to be retrieved from the cache ( since we’ve already called the Authors
query ), it makes a network request for the single Author
query. The really weird part is, if I remove the books
fields from both queries and repeat the steps above, no network request is being made for a single author and the data is retrieved from the cache, as it should.
This leads me to believe that there is something wrong with how books
are identified by code
instead of id
similar to author
so I added a type policy for it. Here is how my apollo cache looks like:
const cache = new InMemoryCache({
typePolicies: {
Book: {
keyFields: ["code"],
},
},
});
If I also manually inspect the cache, the book appears like so:
Book:{"code":"123"}: { __typename: 'Book', code: '123', name: 'Some name' }
which seems to be alright, but still I cannot wrap my head around why when I add the books
field back to both queries and I request data for a single author, instead of taking the data from the cache, a network request is made.
I would really appreciate the help as I’ve been going in circles for the past couple of hours.