Apollo Client cache does not update

Question

I am using Apollo Server / Client and the cache does not seem to work on update mutations. (Create, Delete). The server gets updated but nothing happens on the front end. I have to reload the page to show the new item / show change of an item.

I followed the Apollo docs and modeled it after their sandbox implementation. Let me know if you need more of my code, thank you.

Here is my code:

      <form
        onSubmit={(e) => {
          e.preventDefault();
          createUser(
            {
              variables: {
                name: input.value,
                email: input.value,
                password: input.value
              }
            },
            {
              update(cache, { data: { createUser } }) {
                cache.modify({
                  fields: {
                    allUsers(existingUsers = []) {
                      const newUser = cache.writeFragment({
                        data: { createUser },
                        fragment: gql`
                          fragment NewUser on User {
                            name
                            email
                          }
                        `
                      });
                      return existingUsers.concat(newUser);
                    }
                  }
                });
              }
            }
          );
        }}
      >

Douglas Gabriel Douglas Gabriel · Accepted Answer · 2020-11-29T23:35:42

You need to provide an id property in the writeFragment method. Here's the example on the docs:

client.writeFragment({
  id: '5',
  fragment: gql`
    fragment MyTodo on Todo {
      completed
    }
  `,
  data: {
    completed: true,
  },
});

Also, writeFragment returns void, so you need to use readFragment to get the data you want, or just use the data available in the mutation's result

Apollo Client cache does not update

1 Answers