Using react-query with redux-saga

[Vladislav747]

Hello there! I am looking for library which can help me to cache my requests. But there is no need for me to put useQuery hooks in component i get all my data and store all my data in redux. So is it possible to cache request without any hooks? Or should i do it another way. I haven't found any good examples for this case.

[lm-chad-simmons]

You can give your sagas access to the query client directly and they can use
https://react-query.tanstack.com/reference/QueryClient#queryclientfetchquery to query and cache the data for your sagas and components.

[ygorbunkov]

Isn't the main point of react-query to split out server-side state from client-side state (managed by Redux) to achieve a leaner store while preserving blazing-fast data sync across the app?

[phacic]

@lm-chad-simmons example?

[nhducit]

if you are already using redux then consider using redux toolkit query instead https://redux-toolkit.js.org/rtk-query/overview

[gyrgy]

Hey everyone — I ended up exploring the same idea of combining Redux Saga and React Query while working on a micro frontends setup. To test the concept, I put together a working demo:

👉 react-query-saga-microfrontends

Instead of using QueryClient directly in sagas, the approach relies on a custom abstraction layer that wraps queryClient.fetchQuery, invalidateQueries, and similar methods. This allows React Query to handle server cache, while Redux Saga takes care of control flow and side effects.

🔍 Highlights:

• Uses axios with interceptors as a shared HTTP client
• Wraps all React Query access in helper functions like fetchData, mutateData
• Demonstrates mutation handling with cache invalidation
• Supports a shared QueryClient across micro frontends, while keeping each MFE isolated

This isn’t intended as a production-ready solution, but rather a proof of concept to explore how this hybrid setup might work in practice.

Feedback or improvements are welcome — hope this helps someone digging into similar patterns!

[TkDodo]

The problem with these approaches is if you don’t use useQuery to read from the cache, or create a QueryObserver in any other way, you aren’t using react-query efficiently. It means all queries are seen as “unused”, they might be garbage collected because of it, you can’t automatically refetch active queries, you get no triggers for window focus refetching etc.

You still basically do state-syncing - data from the query cache is copied to redux - which is something I cannot recommend. And then it still uses useEffect to dispatch actions which is not better than just using useQuery.

[gyrgy]

Thanks for the quick response!

You're absolutely right that bypassing observers means missing out on features like automatic refetching or GC awareness. In this demo, I’m intentionally using React Query more like a smart cache layer, with Redux Saga orchestrating fetches, retries, and control flow.

It’s true that this bypasses some of React Query’s lifecycle features, but for complex flows (multi-call sequences, background logic, etc.), keeping orchestration outside of hooks gives more control.

The idea isn’t to sync query data into Redux globally — rather, it’s a proof of concept for how these tools can interop in complex apps like micro frontends, where hooks alone might not offer enough flexibility.