React Query's Integration with Service Workers for Accurate Data Revalidation in PWAs

[chorakchi]

Describe the bug

I'm encountering an issue where React Query’s revalidation process does not integrate smoothly with service workers using the StaleWhileRevalidate strategy. The problem arises when I perform a data mutation followed by an immediate refetch, as React Query often fails to acknowledge updates made by the service worker.
Detailed Description

Service Worker Caching:
My application uses a service worker configured with the StaleWhileRevalidate caching strategy. This means the service worker serves cached data first and then fetches fresh data from the network in the background to update its cache.

React Query Mutation and Revalidation:
After executing a PATCH mutation to update data on the server, I trigger an immediate refetch using React Query.
The issue arises because React Query often retrieves the stale data from the service worker cache rather than the freshly updated data from the server. The service worker is updating its cache with the latest data, but React Query is unaware of this and continues to serve the outdated data.

Lack of Synchronization:
There seems to be no direct communication between React Query and the service worker regarding cache updates. React Query does not have visibility into the service worker’s background revalidation process, leading to scenarios where the application displays stale data even after the service worker has updated its cache with newer information.

Current Workaround:
To address this, I’ve implemented a setTimeout to delay the second refetch, allowing time for the service worker to update its cache. This approach is not ideal and feels like a workaround rather than a robust solution.
The core problem is the lack of synchronization between React Query’s refetching mechanism and the service worker’s caching and revalidation process. As a result, React Query fails to automatically refetch and display the updated data.

Your minimal, reproducible example

x

Steps to reproduce

uses a service worker configured with the StaleWhileRevalidate caching strategy.
This means the service worker serves cached data first and then fetches fresh data from the network in the background to update its cache.

use React Query Mutation and Revalidation:
After executing a PATCH mutation to update data on the server, I trigger an immediate refetch using React Query.
The issue arises because React Query often retrieves the stale data from the service worker cache rather than the freshly updated data from the server. The service worker is updating its cache with the latest data, but React Query is unaware of this and continues to serve the outdated data.

Expected behavior

I’m requesting an enhancement in React Query that enables better synchronization with service workers, especially when using caching strategies like StaleWhileRevalidate. Specifically:

A mechanism to force a network-first fetch after a mutation, ensuring that React Query fetches the latest data directly from the server rather than relying on possibly stale cache data of sw.
Improved integration or hooks within React Query that can detect and respond to service worker cache updates, ensuring that the most recent data is displayed after a background revalidation of sw.

This enhancement would greatly improve the experience of using React Query in progressive web apps (PWAs) or any environment where service workers manage API response caching.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

React Query Version
Service Worker Setup: Workbox with StaleWhileRevalidate strategy
VitePWA Plugin

Tanstack Query adapter

None

TanStack Query version

4.18.0

TypeScript version

4.9.3

Additional context

No response

[TkDodo]

A mechanism to force a network-first fetch after a mutation, ensuring that React Query fetches the latest data directly from the server rather than relying on possibly stale cache data of sw.

I think you're approaching the problem from the wrong layer. React Query manages a promise that gets returned from thequeryFn. It doesn't matter if that comes from a fetch, or from a Promise the service-worker returns, or from a simple () => Promise.resolve(25)

When you're invalidating the query, we are re-running the queryFn. Then, it hits the service worker. Now if you want to bypass the cache in the service worker and wait for new network data to arrive, that's where you need to do it. I guess when you invalidate a query, you'd also want to tell the service worker to remove currently cached data. Then, the next request would go to the server directly.

Improved integration or hooks within React Query that can detect and respond to service worker cache updates, ensuring that the most recent data is displayed after a background revalidation of sw.

If a background revalidation comes in to your service worker, you have to push that information to the QueryCache. Not sure if that would be similar to websockets, but I have an article on that integration: https://tkdodo.eu/blog/using-web-sockets-with-react-query