### Building a robust data layer with react-query [Github](https://github.com/vramana/talks/tree/main/react-query-swecha-2023-04) [Playground](https://react-query-2023.netlify.app)

Software Carpentry: Lessons Learned

Scipy 2014 | Greg Wilson

What does robust mean?
able to withstand or overcome adverse conditions. oxford dictionary

Network requests can fail for a variety of reasons.

  • Network issues
  • Server issues
  • Client issues
  • Authentication issues

We need to handle these failures gracefully.

  • Retry
  • Fallback
  • Error handling
When life gives you lemons,
write better error messages
Let's dive into some code.
A simple example with useState and fetch
Redux example
Let's add some error handling
Now let's try react-query

What's happening here?

Think of queryKey as key prop on React component

Whenever queryKey changes, react-query will refetch the data.

More examples

  • Pagination
  • Dependent Queries
  • Mutations
  • Query Invalidations

Caching

  • Stale Time
  • GC (Cache) Time
  • keepPreviousData
  • Deduplication
  • Prefetch

Retries & Refetches

  • retry
  • retryDelay
  • refetchOnWindowFocus
  • refetchInterval
Synergy with React Router
Code Structure
Case Study
DevTools

Conclusion

  • Robust data layer
  • Easy to use
  • Great developer experience

Resources

People to follow on Twitter

Thank you! Questions?