React query and auth: Who is responsible for what?
summary
A concrete recipe for auth plus server state: centralize user state in a useUser hook that initializes from localStorage, enables a user-specific react-query only when user exists, updates the cache via setQueryData on sign in/update/sign out, and keeps localStorage, internal state and react-query synchronized. Example app is a LazyDays spa with codes on GitHub. Notes on alternatives: npm packages like react-query-auth and react-query-firebase exist (about 504 and 32 weekly downloads respectively versus ~500k for react-query).
AI-written summary · about
chapters (11)
- 0:00Introduction and welcome
- 1:02Talk overview and goals
- 3:08What is React Query?
- 6:37App assumptions and demo setup
- 8:02Client vs server state in auth
- 10:10Why use React Query for auth data
- 14:24Solution: Centralizing with useUser hook
- 20:49React Query Auth library overview
- 23:05React Query Firebase integration
- 24:31Conclusion and key takeaways
- 25:05Q&A session
related talks
19mReact Query and Auth: Who is Responsible for What?
11mSimple data fetching with React Query
39mReact-query: A Lightweight and Convenient Caching Library for React Apps
41mReact Query: The Next Big Library?
25mReact Query Under the Hood
29mReact Query: It’s Time to Break up with your "Global State"!
20mReact Query API Design – Lessons Learned
52mManaging Remote State in React