Hacker News new | ask | show | jobs
by cced 975 days ago
Can you provide examples regarding right/wrong common mistakes you found in use?
2 comments

It was more of a general misunderstanding on how React Query is supposed to work, partially triggered by some mistakes in defining the query keys that meant that React Query didn't work as intended.

I'd recommend this blog post (or actually all blog posts on React query on that site):

https://tkdodo.eu/blog/effective-react-query-keys

What I observed was that the query keys were not consistently defined, which broke automatic refetching when the data was modified and invalidated. So the developer added some manual refetches because they thought React Query couldn't handle that automatically.

You need a consistent structure for your query keys and use that everywhere. Then you only need to make sure to invalidate the correct part of the query key hierarchy and the rest works automatically.

First: Realize that React Query isn't a library for fetching data, but a library for caching the fetched data. So think about how you will be invalidating that cache. For us, the rule of thumb was that each fetch to the API should have it's own cache key in React Query.

Second: The data in cached in React Query is effectively globally available, so it comes with all the benefits and pitfalls that globals have. We use Storybook and do not use React Query in the components that have stories, so React Query is only used in the root components of the app.

ReactQuery state is not global. It's set in a context, and it takes two lines to write a Storybook decorator that ensures a unique cache for each story.

It may still make sense to keep react-query out of your storybooks though.