Why I Choose to Keep Using React Query with Next.js 14

React Query is still worth using with Next 14. Server actions and components are great, but with React Query, you can revalidate data live on your page. It’s like having 50 Shades of cache and the ability to control and refetch data in a flash. It’s the best of both worlds, baby! So, keep using React Query and enjoy the ride. 🚀

Introduction 🌟

Hey there gorgeous friends on the internet, how’s life? Hopefully, it’s all good with you. It’s Sow One here. I can’t get out of the house; Scotland is stuck in the North Pole, and Santa’s nowhere to be found! In today’s episode, I want to address a question that you guys asked me so many times: is React Query still worth using with Next.js, especially now that we have server actions?

Setting Up Next 14 Project 🌐

I have an x14 project set up and a couple of other things like the database to start fetching some stuff. I’ll guide you through everything, and the full code will be on GitHub. But just follow along and let’s have fun!

Creating Components in Next 14 📱

Let’s create an input component to create a post. We’ll have a form with input and a submit button. I’m using React Hook Form, and I’ll walk you through the code.

Post Form Code 💻

I’m using useClient and shat CN and import a bunch of forms and form validation. We’ll create a form and tell it to accept one value, then execute and reset the form on submit.

Fetching Posts with Next Safe Actions 📦

I’ve set up a server folder called actions. I’m fetching the post using a simple function with drizzle to get all the posts with the authors and likes, and then returning it.

Client-Side Fetching with React Query ⚡

We can create a Singleton for query client and wrap it in a query client provider. Then, we can use useGetPost to extract the data and handle errors.

Implementing Additional Features 🛠️

I added likes and remove buttons. Now, if a post gets removed from the backend, it will disappear automatically after a few seconds, even if it’s made by someone else. This episode’s code will be posted on GitHub, and I hope you enjoy it.

Conclusion ✔️

I hope this episode provided insights into why I still use React Query with Next 14. Drop a like, hop on Discord, let’s have a chat! See you in the next one. Bye-bye! Peace 🌈🚀