Apollo-client: Add item to array in cache

Question

Suppose I have the following GraphQL types:

type User {
  id: String!
  posts: [Post!]!
}

type Post {
  id: String!
  text: String,
}

And here is a mutation that returns the updated post:

mutation addNewPost(
  $userId: String!
  $text: String!
) {
  addNewPost(userId: $userId, text: $text) {
    id
    text
  }
}

After running this mutation my cache contains a new entry of a post. How do I add it to the user's posts array? I have tried cache.writeQuery and cache.modify but I cannot figure it out.

update after mutation is described in docs

xadm
– xadm

2020-11-26 23:06:54 +00:00
Commented Nov 26, 2020 at 23:06 — xadm
– xadm, Commented Nov 26, 2020 at 23:06

Andy · Accepted Answer · 2021-11-15 12:05:34Z

7

We do push the item into array inside the update function, which is one of the options of useMutation. I'm writing the whole mutation so that you can get the idea 💡, let have a look at example:

By Update function:

const [createPost, { data, loading, error }] = useMutation(CREATE_POST, {
  update(cache, response) {

  // Here we write the update

  // Step 1: Read/Fetch the data   👈
  const data = client.readQuery({
    query: FETCH_POSTS_QUERY,
  });

  // Step 2: Update the cache by immutable way   👈
  client.writeQuery({
    query: FETCH_POSTS_QUERY,
    data: {
      getPosts: [response.data.createPost, ...data.getPosts],
    },
  });
 },
    variables: formValues,
  });

By refetchQueries:
That's really shortcut 🔥 way to update the cache, by using DocumentNode object parsed with the gql function

const [createPost, { data, loading, error }] = useMutation(CREATE_POST, {
   
    refetchQueries: [                         👈
               FETCH_POSTS_QUERY
              'fetchPosts`' // OR  Query name
   ],   
     
    variables: formValues,
  });

edited Nov 15, 2021 at 12:05

Andy

5,4542 gold badges45 silver badges46 bronze badges

answered Nov 15, 2021 at 11:06

Muhammad Abdullah

4,66534 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rymanso Over a year ago

Good answer :) deserves to be accepted.

moger777 Over a year ago

Small typo, client should be cache.

JosephHall · Accepted Answer · 2020-11-27 22:12:57Z

0

You're going to want to directly write to the Apollo cache in order to update the other entities that your mutation has modified.

Have a look at the docs https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates here for specifics (you're going to want to use cache.modify and cache.writeFragment)

answered Nov 27, 2020 at 22:12

JosephHall

7417 silver badges9 bronze badges

Collectives™ on Stack Overflow

Apollo-client: Add item to array in cache

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related