NEXT.JS 10 // REACT-QUERY // AXIOS // DATASTAX DOCUMENT API

6 Tricks for Next-Level CRUDs

Cache more, fetch less with React Query

npm install axios axios-auth-refresh react-query react-query-devtools sass

1. CACHE YOUR DATA WITH A REVALIDATION LIBRARY

Tanner’s Comparison Table is helpful. See also: Why You Should Use React Query or SWR

2. SET YOUR DEFAULTS WITH AXIOS

Those are my variables, get yours at DataStax.

3. REFRESH TOKENS WITH AXIOS-AUTH-REFRESH

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

4. PRE-LOAD YOUR QUERY CACHE (WITHOUT PRE-FETCHING)

Load up the cache from your app’s first GET

5. EXPORT SELF-DESCRIPTIVE HOOKS

react-query’s useQuery and useMutation hooks

6. SYNC EVERYTHING WITH YOUR HOOKS

The items hook fetches the data and sets the cache. The addItem hook invalidates them.
The saveItem hook on each item’s dynamic route page uses Optimistic Updates.

ML Developer, comic book stacker