What is the difference between caching and redux

Question

I'm wondering what the difference is between redux or context or any kind of application state storage versus client side caching, with the specific example being Apollo's client side cache.

I generally understand from this answer that application state storage, such as redux or context, is a form of caching, and what it does is cache, or in this case, "store", information in RAM. What makes something like Apollo's client cache different? Is it the same and just storing the data like you would with redux, or is it doing something different? Thanks.

Answer 1

Apollo or server state libraries like React-Query provide tools to fetch data from a server and store results in client memory, like you would do with Redux or Context (or simply in a component state).

But they also provide tools to do more sophisticated caching to provide a smooth user experience and bandwith optimization :

• allowing you to set caching strategies per request,
• define caching durations,
• invalidate cache entries when needed (for example after a mutation, when server data changed)
• define a retry strategy on error,
• manage periodic refreshes on background,
• ...

These tools are designed to handle server state in your UI app in an efficient manner. This involves storing data, but this is only the first (and easy) step for a decent HTTP caching tool.

EDIT from phry comment

More than a way to store data, Redux is a javascript Flux implementation, which is a design pattern for shared UI state management. Event though you can implement a HTTP cache with Redux, this is not its primary goal (and obviously you would have to implement the cache logic which is not a trivial task). On the other hand, React-Query, SWR or Apollo are caching tools.