6 Tricks for Next-Level CRUDs

To follow along with this demo, initialize a free Cassandra database at DataStax, whose super-simple new Documents API we’ll be using for our backend. Make note of your username, password, cluster/database ID, region, and namespace. Init a new Next.js app and install these extra dependencies:
npm install axios axios-auth-refresh react-query react-query-devtools sass
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, some smart but minimal approach to all JSON traffic.

 

1. CACHE YOUR DATA WITH A REVALIDATION LIBRARY
React Query more than fit the bill: a low-carb 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 the Next.js framework) but React Query author Tanner Linsley’s polished docs and devtools made his library an almost irresistible choice.
Image for post
Tanner’s Comparison Table is helpful. See also: Why You Should Use React Query or SWR

2. SET YOUR DEFAULTS WITH AXIOS
Different APIs are finicky about different headers. Any day I can DRY up my boilerplate with some global defaults is a great day.

Those are my variables, get yours at DataStax.

3. REFRESH TOKENS WITH AXIOS-AUTH-REFRESH
Authentication panic is a common, what’s really refreshing is accepting help, as I did when I installed this calming token authenticator.

Axios-auth-refresh boilerplate, except for ‘X-Cassandra-Token’ and the pause config.
Image for postImage for post
The token in local storage is just for debugging.

4. PRE-LOAD YOUR QUERY CACHE (WITHOUT PRE-FETCHING)
My favorite React Query trick: instead of requesting data for every detail view, React Query builds a cache from your first paginated GET.

Load up the cache from your app’s first GET

5. EXPORT SELF-DESCRIPTIVE HOOKS
All our CRUD operations are now simple and exportable. React-Query lets us specify our cache policy during and after each query or mutation.

react-query’s useQuery and useMutation hooks

6. SYNC EVERYTHING WITH YOUR 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.

The items hook fetches the data and sets the cache. The addItem hook invalidates them.
Changes on the detail page are reflected instantly–and reverted if they fail–using the Optimistic Update strategy.

The saveItem hook on each item’s dynamic route page uses Optimistic Updates.
With React Query’s devtools drawer open, we have perfect visibility into the state of our cache.
 

This is an external post on DataStax blog originally published on https://joeyanuff-33180.medium.com/6-tricks-for-next-level-cruds-9a916d9e4c87

This is an external post on DataStax blog originally published on https://joeyanuff-33180.medium.com/6-tricks-for-next-level-cruds-9a916d9e4c87

This is an external post on DataStax blog originally published on https://joeyanuff-33180.medium.com/6-tricks-for-next-level-cruds-9a916d9e4c87