PRE-RELEASE REVIEW COPY // UNLISTED // FOR DATASTAX REVIEW ONLY
6 Tricks for Next-Level CRUDs
Tools: React-Query, Next.js 10, DataStax Document API
To follow along with this demo, initialize a free Cassandra database at DataStax, whose ultra-simple new Documents API we’ll be using for our backend. Make note of your username, password, cluster or database ID, and region. Init a new Next.js app and install these extra dependencies:
npm install axios axios-auth-refresh react-query react-query-devtools
I was looking for a clean, reusable React hooks-based approach for all my endpoints, something lighter than the full Apollo Client suite–maybe just a pattern or two, a minimalist-viable approach to use on all my JSON traffic.
1. CACHE YOUR DATA WITH A REVALIDATION LIBRARY
React Query more than fit the bill: a low-calorie request wrapper that follows the “stale-while-revalidate” approach to data fetching. Vercel’s similar SWR hook library also looked like a good option–Vercel being the creators of this demo’s Next.js framework–but React Query author Tanner Linsley’s over-the-top docs and devtools made his library an almost irresistible choice.
2. SET YOUR DEFAULTS WITH AXIOS
Different APIs are finicky about different headers. Any day you can DRY up your boilerplate with some global defaults is a guaranteed good day.
3. REFRESH TOKENS WITH AXIOS-AUTH-REFRESH
Authentication panic is a common affliction, what’s really “refreshing” is steeping out of the shadows and accepting help, as I did when I installed this mind-relaxing token authenticator.
4. PRE-LOAD YOUR QUERY CACHE (WITHOUT PRE-FETCHING)
This is probably my favorite React Query trick: instead of requesting data for every detail view, React Query builds a cache from your first paginated GET.
5. EXPORT SOME CRUD HOOKS
All our CRUD operations are now simple and exportable. React-Query lets us specify how we want our cache to act during and after each query or mutation.
6. SYNC EVERYTHING WITH REACT-QUERY HOOKS
Our Items index now runs with just two hooks, an items query hook and an addItem mutation hook. Each comes with a full menu of lifecycle booleans.
Changes on the detail page are reflected instantly–and reverted if they fail–using the Optimistic Update strategy.
With React Query’s devtools drawer open, we get perfect visibility into the state of our cache.
This Dot Labs: Why You Should Use React Query or SWR
Most of us out here in React-land are out building our apps with the shiny new Hooks API and slinging requests to…