Блог

Предположим, у меня есть следующие типы GraphQL:

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

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

И вот мутация, которая возвращает обновленное сообщение:

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

 

После запуска этой мутации мой кеш содержит новую запись сообщения. Как мне добавить его в массив сообщений пользователя? Я пробовал кешировать.writeQuery и cache.modify, но я не могу понять это.

Мы помещаем элемент в массив внутри функции обновления, которая является одним из вариантов изменения использования. Я пишу всю мутацию целиком, чтобы вы могли понять идею 💡, давайте посмотрим на пример:

С помощью функции обновления:

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

Путем повторных запросов:
Это действительно быстрый способ обновить кеш, используя объект DocumentNode, анализируемый с помощью функции gql

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

Вы захотите выполнить прямую запись в кеш Apollo, чтобы обновить другие объекты, измененные вашей мутацией.

Взгляните на документы https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates здесь для уточнения деталей (вы захотите использовать cache.modify и cache.writeFragment )