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