React Query Setup with Typescript, GraphQL, and GraphQL Codegen

Подписаться 7 тыс.

Просмотров 9 тыс.

50% 1

In this video, I will be going over how to set up react-query in your frontend project to use graphql-request as its fetcher. I will also go into how to use graphql code generator to automatically create your react-query hooks for you as well as types and other things.
Backend Graphql Project: github.com/leoroese/apollofed...
Start Project: github.com/leoroese/reactquer...
Finished Implementation Project: github.com/leoroese/reactquer...
Timestamps
0:00 intro
4:00 project start
6:30 setup react query
8:40 graphql request client
11:16 graphql request
15:50 codegen setup
20:00 codegen query
22:30 mutations
28:55 query invalidation
30:13 queries with params

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@debadipti 2 года назад

Stuck for hours setting up this exact setup.. and Thank You so much for this video !! SUBSCRIBED !!

@daromacs 2 года назад

graphql-code gen dependencies in case you dont want to write them manually: yarn add -D @graphql-codegen/typescript-react-query @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

@quaidbergo Год назад

Nice run through, good pacing and detail 👍

@mayurdax5942 Год назад

Thanks dude for codegen part.

@sobrevivendo-no-front 2 года назад

Thank you Leo, very instructive :)

@Shebu Год назад

Loved the pacing!

@antenando 2 года назад

good stuff dude! Keep it up! subscribed

@u4ea70 2 года назад

This video should have 1000 x the views it has. You saved me hours/days of agony. Thanks.

@harmanmax 3 года назад

Fantastic , Another Cool video :)

@MisouSup 2 года назад

good stuff, man. Thanks a lot!

@KevinOfSteel 2 года назад

Great video. Well explained. Now I get it. ahah Thanks!

@valentingorrin4541 2 месяца назад

amazing thank you so much

@abrahamanakagung6594 2 года назад

Hi Leo, Thank you for this. I just learn RQ with codegen, and this is a gems. One question, how do you test this? I don't have experience testing graphql API before. Thanks and happy holidays!

@mahendranath2504 3 года назад

nice I like it

@donaldivancribillo6984 2 года назад

thanks for this dude. you made setting up a lot easier. One question though is there a way to make the generated file in generated folder to have one file each query? My concern is we go by this approach and we are working with a 10 people team or more. The probability of having a conflicts in pull request is higher if the output file for all queries are put in one.

@CodeDunks 2 года назад

Umm I haven’t exactly tried it out but I’m sure you can modify the codegen.yml to include multiple generates. I found this example that uses a pretty large config github.com/dotansimha/graphql-code-generator/blob/master/dev-test/codegen.yml Then you can maybe point to a created .graphql file in the schema: part per query / mutation. That’s at least what I would try and see if it could work

@3urobob Год назад

Thanks for the tutorial, really cleared things up for me in implementing codeine. I do have one question. Is it really necessary that we have to pass the graphqlRequestClient every time? Feels a bit silly to keep doing that everywhere I want to pull data when the client is not changing. Would be great if it could be globally defined and keep the hook usage cleaner!

@Deliverant 2 года назад

Hi and thanks for the video, i just want to start learning GraphQL really in depth but i've found not so much on the web or courses. How did you started with GraphQL? could you share the resources you used? thx

@CodeDunks 2 года назад

Umm the docs were a good place. I also used videos from Ben Awad as well as Brad Traversy. Then honestly just by building backend Apis using Graphql with different data types and databases. The videos were Ben awad: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-I6ypD7qv3Z8.html Traversy: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SEMTj8w04Z8.html

@neomonkeyking 2 года назад

Hi, just started learning Next.js; I'm trying to understand how/if it's possible to use getStaticProps or getServerSideProps with generated (codegen) functionality. I am unable to use hooks in these Next.js functions for SSR so I'm wondering if there is something missing configuration-wise where we can get generated react-query fetchers in Next.js SSR functions?

@CodeDunks 2 года назад

Im not sure you can use hooks within those functions. What you can do is make a regular api request in those functions then use initialData: in your generated codegen hook within the component. There’s a video with regards to using next.js with react query on my channel that might be able to help.

@BonBonInoc 2 года назад

how to do criteria from react-query? so we can refetch on state change?

@omarhadid1815 2 года назад

it was awesome tutorial !! but.... i want ask a question please? how can i pass token to codegen to auth user?

@CodeDunks 2 года назад

You can do something like this. schema: - localhost:3000/graphql: headers: Authorization: YOUR-TOKEN-HERE www.graphql-code-generator.com/docs/getting-started/schema-field

@alegherix 2 года назад

Loving the content! Would be interesting to see you tackle NextAuth as you've done Next, GraphQL for API, prisma for DB, React hook forms for forms etc... Feels like NextAuth with validation by either Sessions & Cookies, or JWT would be the next step for having a proper fullstack application that fits this stack i.e plays well with both Next, Prisma & Postgres. Anyways, keep up the dope content!

@CodeDunks 2 года назад

Appreciate it Alegherix! I'll take a look into NextAuth, thanks for sharing!

@belkocik Год назад

how to use it with getServerSideProps?

@satyamktr 2 года назад

Which is better react query or swr?

@CodeDunks 2 года назад

It really depends on you. SWR is a smaller package size but react-query has some more features as shown here react-query.tanstack.com/comparison. You can get similar functionality using either one honestly. I have used both and personally use react-query for my projects more due to their devtools and dev experience. One good thing about SWR is that it is also developed by vercel. I am a big fan of using libraries created by the same developers when possible but have recently been using react-query over swr or apollo client

@basicduck 2 года назад

Can I make you a logo?? It’s really hard to find you in my RU-vid subscriptions for some reason 😂

@CodeDunks 2 года назад

Lol I mean if you want to I am not going to say no! Can shoot it over to documentationnerds@gmail.com

@kriethxkriethx6392 2 года назад

How do we add a custom async headers? Such as ``` async () => { const session = await Auth.currentSession(); return { Authorization: session.getIdToken().getJwtToken(), }; }, ``` How do we add the async header here? const requestHeaders = { authorization: 'Bearer MY_TOKEN', //Instead of Bearer MY_TOKEN use the above authorization header }; const graphqlRequestClient = new GraphQLClient(process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT as string, { headers: requestHeaders, })