观察缓存是否已更新,但是直接使用查询的组件不会重新呈现

时间:2020-04-18 15:41:06

标签: reactjs graphql apollo react-apollo apollo-client

我有一个根组件,它包含具有数据的表组件和使用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;

这是我的用途突变:

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

0 个答案:

没有答案