CODEWITHSUNDEEP
reactjsgraphqlapolloreact-apollo
TrevPennington
TrevPennington

Reputation: 475

Apollo Client cache does not update

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);
                    }
                  }
                });
              }
            }
          );
        }}
      >

Upvotes: 0

Views: 1041

Answers (1)

Douglas Gabriel
Douglas Gabriel

Reputation: 41

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

Upvotes: 1

Related Questions