How to configure react-query to perform periodic polling without re-rendering the component often

Shopify Apps
1

Hi,

I need to implement a authenticated fetch with periodic polling but only re-render the component when the polled data is different.

It is easy with apollo client for a graphql endpoint. However, the boilerplate codes for authenticated fetch that Shopify provides uses react-query, which is a more general purpose api client that can target both graphql and REST endpoint.

I have yet figured out how to configure the react-query so that it behaves similarly to apollo client. It probably has to do with configuring the cache mechanism, the refetching setting and how the deep comparison is done.

Can someone give me some pointers on achieving this?

Thanks!

2

Take a look at WunderGraph.

You can use subscriptions with periodic polling to render the data when you need.

Here is the React Query Client docs

3

Hi, thanks for the reply. When you said take a look at WunderGraph, did you mean using this tool or use the same implementation method as them to achieve apollo client performance?

A somewhat related question I have is that is it possible to use apollo client instead of react-query with Shopify’s useAuthenticatedFetch?

Thanks!

4

Sorry! I should have clarified. I meant it as use this tool instead of Apollo Client.

as for your second questions, it should be possible but might be tricky to configure working with it. This is why I recommend WunderGraph. Their client works better with Shopifys useAthenticatedFetch