TanStack React Query v5 Full CRUD Tutorial in 40 Minutes

0:00 - Introduction
0:40 - Technologies we will be using
1:10 - Tutorial App demo
3:04 - Intended audience
4:01 - Github starter for tutorial
4:25 - @tanstack/react-query NPM weekly downloads
5:00 - Run npm install on starter project
5:06 - Setup backend with json-server database, Concurrently, and ViteJS
6:54 - @tanstack/eslint-plugin-query setup
8:41 - ReactJS project folder structure overview
9:56 - Create api http functions with native JavaScript Fetch and Axios library
13:20 - Create song form component
14:43 - Create add song component
15:34 - Create mutation for add song
22:05 - Create song component
25:04 - Create EditSong component
28:44 - Create custom hooks for TanStack mutations and queries
31:33 - Create SongList component
37:39 - Final App functionality testing

Please like and subscribe, it doesn’t cost you anything, and will help me out tremendously, thank you.

How to build TanStack React Query version 5 with ReactJS full CRUD application.

React Query v5 tutorial.

[Huy_Nguyen_USA]

@12:32 I accidentally left out a section of video where I wrap the <App /> with <QueryClientProvider> and the <ReactQueryDevtools>, the code should look like this:

<React.StrictMode>
<BrowserRouter>
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</BrowserRouter>
</React.StrictMode>
)
in the main.jsx file
I have updated the GitHub starter project to include this in the main.jsx file.

[eihbcen]

it's an interesting video, because i like talor and i need to learn react! thnaks

[luketran]

This is really great. Thanks for talking about Axios.

[bolabello]

This is exactly what I needed, thank you so much.

[denizenjournalist]

Concurrently npm package is super helpful, thanks!

[Pareshbpatel]

A very comprehensive tutorial on how to implement CRUD functionality using TanStack React Query V5. Thank you very much.

{2024-07-03} - Subscribed!

[DuK-]

quá đỉnh bác ơi, tìm mãi mới đc cái tutorial kết hợp dùng axios + tanstack react query. Thank you so much man! This is awesome! Please make more of this with additional features from tanstack reactquery like infinite scroll, pagination page, etc...