The best way to update local state after mutation?

Help
,
1

Hi everyone. I have a question about changes of a local state after mutation. For example i have a list of TODOS. I’m creating a new one todo, and i realy need to refetch query (all list) on success? Can i just update a locale state in Observable some way? Cache is changing in right way after create/delete but my component data did not changing.
More code apollo - How to update local data after mutation? - Stack Overflow
P.S. I’m using svelte but question is about basic principles.

2

Hi! I believe in this case, you could use the cache.modify function to modify the cache directly if you’re looking to skip the network request from refetchQueries. Would that work for your use case? Mutations in Apollo Client - Apollo GraphQL Docs

If you don’t mind the network request, I like using cache.evict to evict the data in the cache that I know changed personally. I prefer that to refetchQueries in most cases because it refetches all queries that used that piece of data, not just the queries I specify.

1 Like
3

@daniman Thank you for your answer. But what exactly i should pass in data argumen of update function? Is this optimisticResponse data? In my case ‘fetcher function’ of mutation just retrun promise.

This is my case question is about this variable - const = addItemStuff in article this is - const [addTodo] = useMutation

    // FIRST one is just mutation response
    // const addItemStuff = {
    //   __typename: "Items",
    //   name: item.name,
    //   description: item.description,
    // }

    // Second one is full promise respons
    const addItemStuff = {
        "data": {
            "createItem": {
                "item": {
                    "name": item.name,
                    "description": item.description,
                    "__typename": "Items"
                },
                "__typename": "createItemPayload"
            }
        }
    }

    addItem({
      update(cache, { data: { addItemStuff } }) {
        const flag = cache.modify({
          fields: {
            items(Items = []) {
              const newItemRef = cache.writeFragment({
                data: addItemStuff,
                fragment: gql`
                  fragment NewItem on Items {
                    id
                    name
                    description
                  }
                `
              });

              return [...Items, newItemRef];
            }
          }
        })

      },
      variables: { name: item.name, description: item.description }
    })

Example from article:

const [addTodo] = useMutation(ADD_TODO, {
    update(cache, { data: { addTodo } }) {
      cache.modify({
        fields: {
          todos(existingTodos = []) {
            const newTodoRef = cache.writeFragment({
              data: addTodo,
              fragment: gql`
                fragment NewTodo on Todo {
                  id
                  type
                }
              `
            });
            return [...existingTodos, newTodoRef];
          }
        }
      });
    }
  });