React apollo 缓存已更新，但未更新 UI

Question

在调用外部 api 的事件期间，一旦事件成功，我想发送一个 graphql 查询。

() => {
    return axios(`${serverAddress}/paypal/refund`, {
      method: 'post',
      withCredentials: true,
    }).then(async () => {
      const res = await transactionAPI.getTransactions();

      return res[0];
    });
  },

getTransaction 是我直接使用 graphql 客户端发送的查询：

getTransactions: (pagePL?: IPagePL) => {
    return client.query<{ getTransactions: ITransaction[] }>({
      query: GET_TRANSACTIONS,
      fetchPolicy: 'network-only',
      variables: {
        input: pagePL,
      },
    });
  },

然后在组件中，我使用 graphql HOC 来观察变化。

export const Transaction: SFC<ChildProps<any>> = ({ data }) => {
  if (data.loading || data.error) {
    return <ErrorLoadingComponent error={data.error} loading={data.loading} />;
  }
  return <Layout transactions={data.getTransactions} />;
};

export const TransactionContainer = graphql(GET_TRANSACTIONS)(Transaction);

每次触发 refund 事件时，我都可以看到缓存正在更新。但是 UI 不是。

当我查看事件顺序时，HOC 在 getTransactions 完成之前被调用。 getTransactions 完成后，HOC 不会再次更新它。

Answer 1

确保查询具有相同的输入变量。对我来说，问题是我为一个提供 pagePL: null，另一个是 undefined。

React apollo 缓存已更新，但未更新 UI

react apollo cache updated, but not UI

apollo

reactjs

react-apollo