Apollo consecutive calls are cancelled, possibly due to apolloClient reinstantiation

in my react code, I have the following hook and an onClick function:

const [getDataFromGraphql] = useGetDataFromGraphql();

const getData = async (...) => {
  const res = await getDataFromGraphql({ variables: { ... } });
  ...
}

where useGetDataFromGraphql is just another hook to call a lazy query

export default function useGetDataFromGraphql() {
  return useLazyQuery<..,..>(
    query,
    {
      client: aPrivateClient,
    }
  );
}

and aPrivateClient is an ApolloClient.

export default new ApolloClient({
  link: from([authLink, authExpiryLink, httpLink]),
  cache,
  defaultOptions,
});

I noticed that when I make several clicks of different buttons that call the same onClick function with different variables within a short period of time, every call except for the last call gets cancelled, and the result from the last call replaces everything before, even though each onClick action would’ve each passed different variables.

I saw this answer which made me try memoizing the Apollo Client, but that didn’t help. The react app is connected to multiple clients, so we specify a client in the hook and the example in the documentation with one client probably won’t be applicable.

How can I restructure my setup so that consecutive network calls don’t cancel anything out? And, if this is indeed the root cause, how do I make ApolloClient not re-instantiate?

  • think u need to create multiple instances of the hook, currently u are using the same hook for every button which makes apollo cancel all pending requests and fire a new request with the latest props

    – 

Leave a Comment