React Query and Auth: Who is Responsible for What?
summary
Proposes a concrete solution: a Day Spa app using React Query (useQuery, useMutation, dependent queries) plus auth and localStorage with a central useUser hook that keeps the canonical user state, updates the react-query cache, and resolves the id chicken‑egg by disabling the fetch until user exists. Code lives in completed apps/lazyday-spa/client on GitHub. Mentions npm wrappers react-query-auth (~500 downloads/week), react-query-firebase (~30/week), and react-query (~575k/week). The approach is implemented and keeps server, client cache, and persistence in sync.
AI-written summary · about
chapters (18)
- 0:00Intro
- 1:15Introductory Notes
- 2:07Table of Contents
- 2:50What is React Query?
- 3:31Keeping Data in Sync with Server
- 4:25More React Query Concepts
- 5:31Context for This Talk
- 6:15Authentication
- 7:13User data has lots of owners
- 8:28Reason 1: Mutations
- 9:42Reason 2: Startup
- 11:49Centralize with useUser Hook
- 13:44useUser hook return values
- 14:18All updates go through useUser
- 15:02React Query Auth
- 16:29React Query Firebase
- 17:15Both still finding traction
- 17:46Main Players
related talks
27mReact query and auth: Who is responsible for what?
11mSimple data fetching with React Query
41mReact Query: The Next Big Library?
25mReact Query Under the Hood
39mReact-query: A Lightweight and Convenient Caching Library for React Apps
20mReact Query API Design – Lessons Learned
29mReact Query: It’s Time to Break up with your "Global State"!
21mData Fetching with React Query A Crash Course