Как мне выполнить refetchQueries, когда запрос вызывается с использованием ловушки useLazyQuery?

Question

У меня есть компонент списка каналов, а над ним - поле поиска. Оба компонента используют ловушку useLazyQuery. const [getFeedPosts, { data, loading, error }] = useLazyQuery(GET_ALL_POSTS) В списке каналов я вручную запускаю getFeedPosts при монтировании и визуализирую список элементов. В компоненте ввода поиска я вызываю getFeedPosts при нажатии.

Есть ли способ переопределить кеш после получения результатов поиска? В идеале компонент списка должен быть повторно отображен автоматически.

Проблема в том, что useLazyQuery не предоставляет функцию refetchQueries, поэтому я не могу выполнить повторную выборку после получения результатов поиска.

В противном случае мне понадобится какое-то глобальное состояние (сокращение, контекстный API ...), но с этого момента я должен управлять состоянием вручную, если мне нравится / обновлять / удалять сообщение.

Answer 1

Решил эту проблему, обнаружив, что useLazyQuery предоставляет client, который я могу использовать для обновления кеша вручную.

const [getPosts, { data, loading, error, fetchMore, client }] = useLazyQuery(GET_ALL_POSTS, {
    onCompleted: (data) => updateCache({ client, data }),
});

function updateCache({ client, data }: any) {
  client.writeQuery({
    query: GET_ALL_POSTS,
    data: {
      ...data,
      post: {
        ...data.post,
        getFeedPosts: {
          ...data.getFeedPosts,
          edges: [...data.post.getFeedPosts.edges],
          totalCount: data.post.getFeedPosts.totalCount,
          __typename: data.post.getFeedPosts.__typename,
        },
        __typename: data.post.__typename,
      },
    },
  });
}