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
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!
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
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
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: ruclips.net/video/I6ypD7qv3Z8/видео.html Traversy: ruclips.net/video/SEMTj8w04Z8/видео.html
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?
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.
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!
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.
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
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
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!
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, })
This video should have 1000 x the views it has. You saved me hours/days of agony. Thanks.
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
Stuck for hours setting up this exact setup.. and Thank You so much for this video !! SUBSCRIBED !!
Nice run through, good pacing and detail 👍
Thank you Leo,
very instructive :)
good stuff dude! Keep it up! subscribed
Loved the pacing!
Thanks dude for codegen part.
good stuff, man. Thanks a lot!
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!
Great video. Well explained. Now I get it. ahah Thanks!
Fantastic , Another Cool video :)
how to do criteria from react-query? so we can refetch on state change?
it was awesome tutorial !! but....
i want ask a question please?
how can i pass token to codegen to auth user?
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
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
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: ruclips.net/video/I6ypD7qv3Z8/видео.html
Traversy: ruclips.net/video/SEMTj8w04Z8/видео.html
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?
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.
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!
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.
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
how to use it with getServerSideProps?
nice I like it
Which is better react query or swr?
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
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!
Appreciate it Alegherix! I'll take a look into NextAuth, thanks for sharing!
Can I make you a logo?? It’s really hard to find you in my RUclips subscriptions for some reason 😂
Lol I mean if you want to I am not going to say no! Can shoot it over to documentationnerds@gmail.com
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,
})