обратите внимание, что кэш обновлен, но компонент, который напрямую использует запрос, не выполняет повторную визуализацию - PullRequest
Новая
       19

обратите внимание, что кэш обновлен, но компонент, который напрямую использует запрос, не выполняет повторную визуализацию

1 голос
/ 18 апреля 2020

У меня есть один root компонент, и он содержит компонент таблицы, в котором есть компонент данных и редактор, использующий хук useMutation. Когда я создаю новый элемент данных с помощью useMutation, моя таблица не выполняет повторную визуализацию, даже если я обновляю кэш или даже сообщаю клиенту о мутации. Как я могу сообщить своему компоненту таблицы и запустить повторную визуализацию после создания новых данных с помощью ловушки useMutation?

Вот мой клиент: 

/* eslint-disable import/no-extraneous-dependencies */
import { ApolloClient } from 'apollo-client';
import {
  InMemoryCache,
  IntrospectionFragmentMatcher,
} from 'apollo-cache-inmemory';
import { createUploadLink } from 'apollo-upload-client';
import introspectionQueryResultData from './fragmentTypes.json';

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData,
});

const cache = new InMemoryCache({ fragmentMatcher });

const client = new ApolloClient({
  link: createUploadLink({ uri: 'https://rtpbackend.ezileli.dev/graphql' }),
  cache,
});

export default client;

Вот мое useMutation: 

const [createFunc] = useMutation(CREATE_PARTNER, {
    update(cache, { data }) {
      const { partners } = cache.readQuery({
        query: PARTNERS,
        variables: {
          condition: {
            limit: 10,
            offset: 0,
            order: [['createdAt', 'desc']],
          },
        },
      });
      const operationName = CREATE_PARTNER.definitions[0].name.value;
      const response = data[operationName].partner;

      client.writeQuery({
        query: PARTNERS,
        data: {
          partners: {
            ...partners,
            totalCount: partners.totalCount + 1,
            data: partners.data.concat([response]),
          },
        },
      });
    },
  });
...