Why is an updater/update function required to update the local cache in React Relay and Apollo Client?

Question

I am considering using React Relay or the Apollo Client. I like the idea of GraphQL as a query language that can be executed against any API or data store.

However, I am surprised by the need to manually (and imperatively) update the store/cache after a simple mutation such as adding a todo item to a list. Here is the documentation for the updater/update functions:

http://facebook.github.io/relay/docs/en/mutations.html https://www.apollographql.com/docs/react/essentials/mutations.html

Why is a user-defined updater function required?

Specifically, why must I write an updater function to handle running these two GraphQL queries in sequence?

//Create todo item
mutation createTodo($input: TodoInput!) {
    createTodo(input: $input) {
        id
        name
        desc
    }
}

mutationVariables = { input: { name: 'Shopping', desc: 'Get groceries' }};


//Select all todos
query {
    todos {
        id
        name
        desc
    }
}

Why would the todos query not return the new todo item automatically? That is the POINT of a declarative query language IMO.

wrod7 wrod7 · Accepted Answer · 2018-09-06T00:41:38

The idea behind updating the local cache is to minimize the amount of data being passed between the client and the server.

Updating the local cache manually is entirely up to you. You can absolutely program your mutation to return the new or all todo's then it will update your local cache. (it will be slower than manually updating since you will need to wait for the response.) There are some good use cases for manually updating vs waiting for the response from the server

With apollo you can also turn off local cache and just use "network-only" as your fetch policy.

Why is an updater/update function required to update the local cache in React Relay and Apollo Client?

1 Answers