feat(react-query): add pause provider
This implements a pause provider according to proposal in https://github.com/TanStack/query/discussions/8574 which functions similar to subscribed prop, but to a whole tree and without redundant re-renders.
Not decided on the correct behaviour if subscribed option is true, currently it will ignore this, but probably it should not.
See provided example for usage, happy to flesh out docs and tests if you think this is a viable approach.
I tried to use the examples/react/react-native project, but couldn't get it to start (probably because pnpm isn't compatible with RN).
This can easily be augmented with a more user friendly provider component along these lines:
export type PauseProviderProps = {
paused: boolean
children?: React.ReactNode
}
export const PauseProvider = ({
paused,
children,
}: PauseProviderProps): React.JSX.Element => {
const pauseManager = React.useRef<PauseManager>(null)
if (pauseManager.current === null) {
pauseManager.current = new PauseManager(paused)
}
React.useEffect(() => {
pauseManager.current?.setPaused(paused)
}, [paused])
return (
<PauseManagerContext.Provider value={pauseManager}>
{children}
</PauseManagerContext.Provider>
)
}
@TkDodo Any thoughts on the approach?
@TkDodo Such a feature would be awesome for all React Native projects. New subscribed prop is exactly what we needed to disable rerenders for any non visible React Navigation screen + properly refetch (depending on stale time) when navigating back to a previous screen or another tab. But as @oblador mentioned:
- we need to add it to every useQuery, which is cumbersome
- when leaving a screen, we need to update
subscribedto false with a rerender, so the whole screen rerenders even though nothing has changed visually (the point ofsubscribedin the first place is to avoid unnecessary rerenders)
Maybe there would be a way to plug into the library without extending the API surface?
@TkDodo / @lachlancollins Any chance you could give me an indication whether you will consider this PR? If so I can rebase and address any feedback you might have.