反应已更新的阿波罗缓存，但未更新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事件时都会看到缓存正在更新。但是用户界面不是。

当我查看事件的顺序时，会在getTransactions完成之前调用HOC。 getTransactions完成后，HOC不会再次对其进行更新。

Answer 1

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