How to Use React Query with NextJS 13

preview_player
Показать описание
Want to learn how to use React Query aka Tanstack Query?

Want to learn how to write cleaner code and more manageable React components?

In this video, I review the process of setting up Tanstack in a NextJS 13 application. I also show the process of setting up query functions, mutation functions, query keys, refetching, devtools, etc.

While this isn't meant to be a full code-along, it should be an informative video that helps you write cleaner components in your React applications, which a much better process of handling asynchronous state

Рекомендации по теме
Комментарии
Автор

just what i was looking for, i also am using nextjs13 with typescript

ogtgabriel
Автор

28:48 - man! WTF :D - nice reworking of shadcn button! I remember once I reworked completeley one of this date pickers from Material UI - it tooks me ages!

krzysztofst
Автор

Nextjs, Next-Auth, shadcn, zod, prisma, now tanstack...Just my kind of stack😌

samess_
Автор

Thank you for this guide. I was wondering however: since we wrap our entire app inside a provider that’s marked as client component, don’t we lose all the benefits of server components? (Basically we pass server components as children of client components, which goes against their architecture)

_boris
Автор

Great content, super simple to understand and really helped me out!

DestinationDub
Автор

back here again to request for a guide on how to implement react-query with server components🙏🙏

coded_
Автор

I think you should have everything empty first. Follow your instruction with a lot of your code already there is hard to follow. I follow and it not work, complain about 'use client' something

VinhDo-ux
Автор

Hi Erik!
Thanks for this video.
In my project I created the same. Instead of Axios I using Directus SDK for getting the data (Directus is headless CRM like Strapi).

inside search element
const { data } = useQuery({
queryKey: ['ua_fields_new'],
queryFn: async () => {
const fields = await getFieldsList();
console.log(fields);
return fields
},
})

and in query file:

const directus = await authClient();
export const getFieldsList = cache(async (limit: number = 30, offset: number = 0, id: number = 500): Promise<FieldModel> => {
const response = FieldsList {
table_fields(limit: ${limit}, offset: ${offset}, filter: {id: {_gte: ${id}}}){
id
name
....
}
}`
);

return response;
})

And finally i have an Error: Element type is invalid. Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function.
becouse "await" returning Promise<FieldModel> type of object instead <FieldModel>

With useEffect I have the same problem.

Help me please with this problem.

vintfom
Автор

You missed an important part of the setup: Hydration of the state. If not, the app will soon behave incorrectly. Besides that, nice vid!

MartinMochetti-hm
Автор

Great work Eric! just came across your channel. Was looking for this and got lucky you posted it today 😅
just a subscribe from me 👍

hqasmei
Автор

Thanks for the tutorial! Just wondering what version of React-Query you was using for this? It seems they've done quite a few updates in the last 2 months so a few things have changed e.g. isLoading no longer available in useMutation ?

lewischarlton
Автор

Hi, nice tutorial, which version of tenstack are you using?

saadmanbjitsaadmanbjit
Автор

If this is deployed to vercel, why the crud operations work in the database side but not the website?

giannisproumas
Автор

i get an error when i try using async/await in the axios get data function

jacoborode
Автор

Hi, Nice Video, One Doubt

When i build the Next js for production the mutation is not working but works in dev mode. Cached Value at the Build Time is showing but can't able to validate or mutate. Do you any idea what i might be doing wrong.

Richard-wglu
Автор

you are missing what I'm looking for, data fetch sharing between client and server

ooogabooga
Автор

ur VS Code looks exactly like mine lol, same theme, files bar at the right side

demian.succs
Автор

Hey, is there a reason you stored the QueryClient object in local state?

Brian-vyxp
Автор

What is the name of that theme? I want to try it.
And can it be dialed down a little bit or is it not customizable by that much?

KarimShalapy
Автор

thx but the theme of vscode is not totally clear

HowForex