Apollo Client is not using cached data and instead makes a network request

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.