反应已更新的阿波罗缓存,但未更新UI

时间:2018-11-30 20:31:17

标签: reactjs apollo react-apollo

在调用外部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不会再次对其进行更新。

1 个答案:

答案 0 :(得分:1)

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

enter image description here