Custom CacheProvider for queryClient in Server-Side environment (Next.js)

[ProgerDav]

Hi, dear react-query community! I have been using react-query for some time now, and it seems to fix a lot of issues out of the box which is really cool. I have been using react-query in React projects only however, I am now trying to integrate it into a Next.js app.
Luckily there is a dedicated section in the docs for SSR and Next.js.

I am particularly interested in the "Using Hydration" feature, where queryClient is used to prefetch some requests and then the state is being hydrated on the client-side.

However, as already mentioned in docs, queryClient caches the requests which can be memory consuming on the server-side.
While one can just disable caching, I think it would be quite useful to be able to somehow provide a custom cache provider for the queryClient specifically on the server.
This was react-query can even be conveniently used in Next.js getServerSideProps or getStaticProps, therefore both server-side requests with user-based caching and client-side requests will be handled only by react-query.
I image it could look something like this

const redisConfigs: QueryClientCacheProviderConfigs = { connectionUrl: "..." };
const queryClient = new QueryClient({ cacheProviderConfigs: redisConfigs });
Or even
queryClient.setCacheProviderConfigs(redisConfigs);

[TkDodo]

I haven't tried that yet, but what you are looking for sounds like the persistQueryClient plugin. I would go to v4 for this, as we've improved the api: https://react-query-beta.tanstack.com/plugins/persistQueryClient

• write a persister for redis (I've never worked with redis, but if you have an async read and an async write method, you should be good to go)
• during getServerSideProps:
  • create a new queryClient
  • call await persistQueryClientRestore to load from the external storage
  • call await prefetchQuery as per usual, but pass a staleTime to it, so that you'll read data from the cache if its not older than the passed time
  • after that, write back to redis with await persistQueryClientSave
• continue with hydration as normal

not sure how redis would handle concurrent writes, but I guess it can? let me know how it works :)

[Shkulipa]

@TkDodo okay, inside getStaticProps, getServerSideProps and others, i can call persister storage there ? save, delete and so on information there, even after navigations other pages ?

[TkDodo]

yes like I said, you call await persistQueryClientRestore and await persistQueryClientSave. Those are just async functions that read from the external store into the queryClient / write to it. Not quite sure what you mean with "even after navigations other pages "...

[ProgerDav]

Hey @TkDodo! Sorry for a late reply here.

I have managed to set up a working system using your advice. Unfortunately, I don't have access to the initial code, but I have tried recreating it bare minimum. Here is the repository - ReactQuery Redis Persister.

In summary, I have created a very simple adapter to match the Redis interface to the AsyncStorage required by the persister generator function. Then, in getServerSideProps I have something like.

const queryClient = new QueryClient();
  const DEFAULT_COUNTRY = "armenia";

  const persister = createAsyncStoragePersister({
    storage: RedisStorage.getInstance(), // My simple adapter
  });

  await persistQueryClientRestore({
    queryClient,
    persister,
    maxAge: 1000 * 60 * 60 * 24, // 24 hours
  });

  await queryClient.prefetchQuery(
    ["universities", DEFAULT_COUNTRY],
    () => getUniversitiesInCountry(DEFAULT_COUNTRY), // Just a simple API call fetching and getting some json
    {
      staleTime: 86400 * 1000, // 24 hours
    }
  );

  await persistQueryClientSave({ queryClient, persister });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
      defaultCountry: DEFAULT_COUNTRY,
    },
  };

The adapter looks like this.

import Redis from "ioredis";

class RedisStorage {
  static getInstance() {
    const instance = new Redis({
      password: process.env.REDIS_PASSWORD,
      host: process.env.REDIS_HOST,
      port: process.env.REDIS_PORT,
    });

    return new RedisStorage(instance);
  }

  constructor(redis) {
    this.redis = redis;
  }

  async setItem(key, value) {
    await this.redis.set(key, value);
  }

  async getItem(key) {
    return await this.redis.get(key);
  }

  async removeItem(key) {
    await this.redis.del(key);
  }
}

[ProgerDav]

I remember trying out the PersistQueryClientProvider, but I faced issues with my persister code being run in the browser. Thus I moved it to the getServerSideProps. Also, pretty quickly, I put up a small wrapper to make the code more reusable.

As for the more advanced stuff, such as handling concurrent writes, etc. I have not done much testing or benchmarking, but I am happy to revisit this!

@TkDodo, please let me know if there is anything else I can provide and/or try. I am happy to help this fantastic library in any way!

[TkDodo]

amazing example, thank you 🙏