graphCache not working as expected

[bubbaspaarx]

We are trying to move over to graphCache from the default document-cache in order to reduce the amount of fetches caused when we have mutations.

What we are trying to establish right now, is if it will actually fix this issue or if there's an alternative way.

At the moment we have a list of authors with a list of their respective books and inside each book are the pages. We make a query for the list of authors, then a separate query for the book and pages per author which all sit inside a separate component.

If we delete a page from a book, all books for all authors appear to be refetched and the book components re-rendered. This we understood to be a constraint of document-caching. However, we are now attempting to resolve this by using graph-cache and invalidating the individual books so only theirs are refetched. So far we still appear to be re-rendering all book components for all authors and refetching them. Is this normal or have we made a mistake with the cache.invalidation?

our cache invalidation

updates: {
        Mutation: {
          deletePage: (result, args, cache) => {
            cache.invalidate({
              __typename: 'Book',
              id: result.deletePage.book.id
            })
          }
        }
      }

[JoviDeCroock]

Hey,

This is a side-effect of not knowing what the author.books array contains as a type, let's look at how this works.

When we invalidate the book this book becomes ['Book:1', null] as we have invalidated Book:2, if your author.books type is [Book]! we can safely render the partial data (requires schema-awareness) if it's [Book!]! we can't safely render partial data.

So invalidate won't work for this particular case, a better solution for this specific case would be to get the affected entity in question and update its array with updateQuery.

[bubbaspaarx]

Just wanted to say thank you for your help and understanding and for URQL too. It's a brilliant tool. I'm still having a small issue but think I understand it more now. Much appreciated

[bubbaspaarx]

So we've made some progress with the pages situation. adding and deleting pages now refetch their parent book queries as expected. We are now seeing a slightly different issue though when creating a new book. In this situation, we already use the 'addtionalTypenames' context so that empty arrays of results don't prevent the fetch for newly added books (this works fine under default cache). However, the situation we are seeing seems to disregard this and also doesn't refetch even if other books are in the array.
We assumed that the original query we make for all books per author would be triggered when a new book is added. We even added the 'author' as an additionalTypename the mutation but this doesn't make a difference either. What are we missing here? Many thanks

[kitten]

The additionalTypenames API isn't used by Graphcache since it doesn't operate on heuristics but on a normalised cache.

If you're just looking to invalidate again with Graphcache, as before, you can also invalidate fields, eg a listing field on Query

[JoviDeCroock]

additionalTypenames is a concern for the document-based cache, when we want to add items to an entity we'll need to write an updater. So a general mindset to take is "is the entity already available in cache" if it is in cache we'll automatically update it. "does the respond signal us the updated entity", this means that if you'd return the parent entity with the updated array graphCache can automatically update the entity in-memory. If you only return the newly created entity you'll have to provide the logic to append it to the array.

[bubbaspaarx]

Thank you again for your help with this. We've stuck with the graphcache and removed the additionalTypename fields too. To select the correct fields to invalidate, we tried invalidating the author, but as the original query for author was for all authors, it ended up overfetching. We then used the field invalidation technique which initially (using the example on the docs) ended up invalidating all books, we could narrow it down to the fetch we needed by doing this

          createBook: (result, _args, cache) => {
            const key = 'Query'
            cache.inspectFields(key).filter((field) =>
                  field.fieldKey === `books({"authorId":"${result.createBook.author.id}"})`)
              .forEach((field) => {
                cache.invalidate(key, field.fieldKey)
              })
          }