CODEWITHSUNDEEP
reactjsapolloreact-apollo
leogoesger
leogoesger

Reputation: 3830

react apollo cache updated, but not UI

During an event that calls an external api, once event is successful, I'd like to send a graphql query.

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

      return res[0];
    });
  },

getTransaction is a query I sent using graphql client directly:

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

Then in the component, I use a graphql HOC to watch for the change.

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);

I can see the cache is being updated everytime I trigger the refund event. But the UI isn't.

When I look into the order of events, the HOC is called before the getTransactions is finished. Once getTransactions is finished, the HOC does not update it again.

Upvotes: 1

Views: 158

Answers (1)

leogoesger
leogoesger

Reputation: 3830

Make sure to have the same input variables for the query. For me the problem was I was providing pagePL: null for one, and another one was undefined.

enter image description here

Upvotes: 1

Related Questions