PRE-RELEASE REVIEW COPY // UNLISTED // FOR DATASTAX REVIEW ONLY

6 Tricks for Next-Level CRUDs

Cache more, fetch less with React Query and Axios

Tools: React-Query, Next.js 10, DataStax Document API

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

1. CACHE YOUR DATA WITH A REVALIDATION LIBRARY

Image for post
Image for post
Linsley even threw in a helpful Comparison Table

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.
Image for post
Image for post
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 SOME CRUD HOOKS

react-query’s useQuery and useMutation hooks

6. SYNC EVERYTHING WITH REACT-QUERY 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.
Image for post
Image for post
Image for post
Image for post

ML Developer, comic book stacker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store