Trying to understand the 'Magic'

[ispyinternet]

Using Svelte.

I've setup a query to return 'all items' (accepts no variables) and a mutation to 'add item'.

When I add an item, the query to return all items automagically runs and the data is updated!

While this is very cool, I can't reason how and why this is happening!

How does urql decide which queries to re-run and when?

Cheers!

[kitten]

There's a little explainer here actually ✨ https://formidable.com/open-source/urql/docs/basics/document-caching/

The default logic reruns queries if your mutation touches any of the same types that the query has seen before.

[ispyinternet]

Cool! Wo that then leads on to some more questions, for example, the network load / tradeoff - but then I got to reading a bit more about this cache (https://formidable.com/blog/2020/normalized-cache/). There is a section about Updating Data:

The updater configuration allows you to define behavior that has to be executed when a subscription or mutation comes in. Graphcache will try its best to automatically update entities but when the entity isn't present in the cache (or has to be removed) it can't really assume how this should be done. Graphcache will need our help here. Let's consider a scenario where we add one todo to our list:

It almost sounds like out of the box, if the addTodo mutation returned the new todo - the cache would update its local model - but I suspect that is one optimistic step too far? But potentially I could set about configuring the cache to achieve the same results without the network overhead?

const cache = cacheExchange({
  updates: {
    // We tell graphcache that this field is a mutation, we can also do Subscription
    Mutation: {
      // The name of the field
      addTodo: (result, args, cache) => {
        cache.updateQuery({ query: TodosQuery }, (data) => {
          return { ...data, todos: [...data.todos, result.addTodo] }
        })
      },
    },
  }
});

Would be good to start to understand the design patterns around this - I guess some more experimentation and reading up should hopefully get me there.

[kitten]

Yep, the normalized cache updated entities out of the box, but if you add or remove anything you'll have to do some manual updating as your snippet there shows. We have more docs sections on that topic as well though: https://formidable.com/open-source/urql/docs/graphcache/normalized-caching/ 👍