When I first discovered your channel, I thought: such a treasure! It should be hidden from the peoples eyes. But of course I’m not a selfish rascal, and I share it with every software engineer I know. Really love your content, it helps me a lot.
Hey Jack, first thank you for your great content. Love your videos as you most of the time show a complete tech stack and not each technology in isolation. I think this just becomes more and more important, as even if you pick a lite tech stack, it most of the time includes already more than 5 different technologies, depending on what you count. I understand that you currently still want to cover each technology from the ground up in every video so that no one feels left behind. Sadly, maybe because of time constraints, some important tech stack integration gets left behind. For example, the implication of using fetch inside getServerSideProps, i.e. a second roundtrip and invocation of 2 serverless function instead of one. An example solution just with apollo client instead react-query + graphql request can be found in the official apollo-server-and-client example. I think many of your viewers would not hesitate to watch even longer videos, so you have the time to go into more detail and explain the implications of combining multiple technologies in a specific way. Thanks again for your awesome videos.
was searching a while for decent setups after a few attempts and trying to make the whole process driven by docs - i'm about 10% through the code now to get it working. Nice work, piece of genius :)
Hey gamers, I'm just commenting to say that the library `apollo-server-micro` is created by Apollo themselves, and isn't a mini-version of Apollo Server, it's for the framework called Micro that NextJS uses (there is also `apollo-server-express` for ExpressJS and `apollo-server-hapi` for Hapi). So using this library gives you all the features of the base Apollo Server with less configuration.
"with less configuration" meaning that you *have* to do less configuration to get it *working*, not meaning that you *get* to less configuration if needed. I'm not editing the original comment since editing removes the heart
I wish to see more this advanced setups, watching you lets me remind myself, I still have a lot to learn. And this is soo fun :) Ohh btw, I love your the nature footages that you take outside of computer screen, it feels super calming
Awesome Content and Quality! exactly what I need to implement for my personal project. Thank you so much for taking the time and effort to create this video, Jack!
Excelente aula Jack. Procurei por algo e achei muito mais no seu canal. Muito obrigado. Excellent class Jack. I search for one thing and I found much more in your channel. Thanks a lot.
you are always NUMBER one reference on framework/library... whether Nexus or Type-GraphQL the boilerPlate is too dense, what's wrong with classic REST API :D !? Can you add prisma in your demo next time instead of using in memory json file ?
Awesome, but what would you say is the benefit of using TRPC over Typegraphql or Nexus? Seems to me, that these later two libs add type safety to a common approved standard (and language-agnostic) such as graphql.
I don't really see any benefit of TRPC over GraphQL. When I did a video on TRPC my take on it was that it was a good way to get an end-to-end typed API mechanism if you did NOT want to do GraphQL.
There is always going to be an impact in performance by adding code. And yes a GraphQL server has to parse the incoming query each time. The question is whether that performance hit outweighs the architectural gains, and that only something you can deduce for your project. That's why they pay you the big bucks. :)
Could you explain what we're accomplishing in getServerSideProps with the prefetchQuery and dehydratedState? While playing around trying to figure it out, I commented out the entire getServerSideProps function and my page still worked just the same. I'm also curious about the next step where I would add an ORM (I'm trying out MikroORM) so that the graphql resolvers can reach out to a database. Once I have access to my database in the application, is there any benefit to making a graphql query inside getServerSideProps over just using the ORM directly?
Have a look at "View Page Source" on the page without the getServerSideProps and then re-enable getServerSideProps and try again. The difference is that the page is "server side rendered" when we use the getServerSideProps. So when we request the page we make the request on the server, then we render the page with the data on the server. The page includes both the HTML for the page and also the serialized state. That serialized state is then rehydrated on the client and when we do the React Query hook on the client we use the serialized state for the request instead of making the request again on the client.
Hi Jack. I found your awesome channel earlier this year when I was searching for Typescript resources, and it's been a fun ride. I have question. I'm integrating GraphQL in my nextjs project using this video. I want to use the Apollo studio to test my endpoints, but have been running into cors issues. I've done some research using the Apollo docs, Nextjs and stack overflow, but the solutions suggested did not work. I'd like to know if you've encountered it, and how you were able to resolve it. Thanks.
Thanks for posting this video! I'm really interested in these topics!! I got stuck where you tested your getDogs query. Firstly, the graphql vscode extension didn't give me the "Execute Query" tooltip to click on. I noticed this on their Github page "NO LONGER SUPPORTED - execute query...we will be recommending other extensions for this." I tried to execute the getDogs query by copy pasting it into the apollo webclient at /api/graphql but I got these errors: 'Cannot query field "dogs" on type "Query".' and "TypeError Failed to fetch". I'm curious if you may know why this isn't working on my end.
I heard something about that, I love that the feature set of the extension changes like a week after I publish the video. Two questions, does the generator still work? It does for me. Also would you mind trying the GraphiQL desktop app (www.electronjs.org/apps/graphiql) to see if that works. You should just be able to point it at the localhost:3000/api/graphql endpoint and it should work. If it doesn't please let me know.
@@jherr 🤦♂It worked! I was trying to find out how to use GraphiQL and I couldn't find a good / recent article. It's been a couple years since I really messed around with GraphQL and I thought maybe GraphiQL had been depricated or this new studio.apollographql was new the new "hot thing". Super annoying that the client Apollo provides you with doesn't work 🙄Thanks for the fast response!! I was pulling my hair out over here... I agree super annoying about the graphql extension and the timing lol. Guess that's life in the web dev tutorial game. We feel it on the viewer's side as well *sigh* Looked like an awesome feature! I'll be checking back on their github to see which extensions they recommend. Also if you find a cool one, please do a video on it and let us know. Thanks again!
@@classyboy2000 Let me know if you find something good and I'll pin it in the comments and the next time I talk about GraphQL I'll use that instead. :) Thanks for your viewership!
@@jherr looks like the extension has moved to Its been moved to - Inline Operation Execution by GraphQL Foundation. The electron all link posted also seems broken. Thanks again for making all the great content!
Thank you !! This is very helpful , Can you do the same with Reactjs with e2e deployment all the way to AWS using github actions pipeline using aws cli or terraform also , very curious to find out what gear/software do you use to record these tutorials?
Awesome, fantastic, thanks so much, i have a question, i need build and run Next.js app in another computer, this is a suggestion video, for example, i need run this app in a windows desktop, how can make this without my source code? i will run only builded code on another computer(my client). thanks.
This is a perfect video!!! But I think we don't need that react-query plugin for codegen. you installed codegen library for react query which is used to create custom hooks, but you used the plain normal react query useQuery hook anyways. you didn't add the plugin in codegen.yml too.
Hello small question, at 5:10 you use new ApolloServer, seeing that nextjs re-runs this code every time ew call the API endpoint, wouldn't it be better to use a Singleton in that instance ?
Solid video, thanks! One small thing, I think for the dog by name query you'd want the query key to be ["dog", name] so that every dog doesn't have the same query key, no?
why use react-query on top of graphql? Isnt it more beneficial to use a client that supports graphql first class? You have the benefits of co-location which lead to graphql fragments for better data dependencies per component thus more fine-grained caching (fetching it's mounted for example). Also, since you already use graphql codegen, you can generate hooks to fetch the data, in your example, the codegen can generate useGetDogsQuery() that can be called in both server/client env, the rehydrating needs to be stitched more manually though, you have this video i think :)
How come with NextJS apps the backend server and the frontend client aren't built with two different directories/repos? Wouldn't you want to host the frontend and the backend with different services for a webapp?
Hey is there a way you could send me a link or something to get my zsh to look similar to yours? I think its the agnoster theme but I can't get mine to look as crisp as yours -- wondering if you can save me time lol?
I can't find that awesome GraphQL extension, for the life of me... I installed two, from "Graphql Foundation", and i can't get the querying inside the editor to work.... could you help, maybe send a direct link from the marketplace? Thanks for everything as always
Yeah, I wish we could just use the classes directly for typing. But the problem is that the classes are typing data, and what the client needs typed are the queries, which may not 1-to-1 reflect the data. Plus, this way you could actually break the API out into its own server if you chose to do that.
While rendering the ui with data I'm fetching from my own backend, I'm getting this error: Error: Hydration failed because the initial UI does not match what was rendered on the server. When I switch back to react version 17, this error isn't there anymore. Do you know how I can solve this? I really want to use react 18's new features.
@@jherr Thank you! I sort of solved it by adding a typeof window !== "undefined" to the return statement on the indexpage, like this: return {typeof window !== "undefined" && events.map((e) => e.slug)}; However, it doesn't seem very logical to do this on every page. Do you have a suggestion on where to put this logic? If it's even the right way of fixing this for now. Thanks for your help 🙏
Great video but some of your commands are typed so fast its impossible to see. For a newbie who does not know all the dependency commands etc it would be great if you slowed it down a bit. Other then the thanks
When I first discovered your channel, I thought: such a treasure! It should be hidden from the peoples eyes. But of course I’m not a selfish rascal, and I share it with every software engineer I know. Really love your content, it helps me a lot.
Thank you!!!
same thoughts
Same thought 😂😂😂 won't lie here.
I literally did this exact same setup about 2 weeks ago, and God there were a lot of bumps. There are some really good takes here. Thanks Jack
Jack, you are easily one of the top 5 best web dev teachers in youtube. Thanks for taking the time to share your knowledge!
I never skipped an ad since the first day I came across this channel. Pure premium content
Hey Jack, first thank you for your great content. Love your videos as you most of the time show a complete tech stack and not each technology in isolation. I think this just becomes more and more important, as even if you pick a lite tech stack, it most of the time includes already more than 5 different technologies, depending on what you count.
I understand that you currently still want to cover each technology from the ground up in every video so that no one feels left behind. Sadly, maybe because of time constraints, some important tech stack integration gets left behind.
For example, the implication of using fetch inside getServerSideProps, i.e. a second roundtrip and invocation of 2 serverless function instead of one. An example solution just with apollo client instead react-query + graphql request can be found in the official apollo-server-and-client example.
I think many of your viewers would not hesitate to watch even longer videos, so you have the time to go into more detail and explain the implications of combining multiple technologies in a specific way.
Thanks again for your awesome videos.
was searching a while for decent setups after a few attempts and trying to make the whole process driven by docs - i'm about 10% through the code now to get it working. Nice work, piece of genius :)
Hey gamers, I'm just commenting to say that the library `apollo-server-micro` is created by Apollo themselves, and isn't a mini-version of Apollo Server, it's for the framework called Micro that NextJS uses (there is also `apollo-server-express` for ExpressJS and `apollo-server-hapi` for Hapi). So using this library gives you all the features of the base Apollo Server with less configuration.
"with less configuration" meaning that you *have* to do less configuration to get it *working*, not meaning that you *get* to less configuration if needed. I'm not editing the original comment since editing removes the heart
I wish to see more this advanced setups, watching you lets me remind myself, I still have a lot to learn. And this is soo fun :)
Ohh btw, I love your the nature footages that you take outside of computer screen, it feels super calming
Awesome Content and Quality! exactly what I need to implement for my personal project. Thank you so much for taking the time and effort to create this video, Jack!
thank you very much. i had to rework and refactor my code for 3 full days but it really opened my eyes to how thinking about the tools i am using
RUclips algorithm is really something, I'm working on a NextJs project with GraphQL endpoint using Apollo and awesome video suddenly pops up
Best React content I’ve found so far. Thanks for the great videos!
So many things that can "get you", and by "you" i mean all of us , awsome tech stack by the way.
Yes Sir - you had my back. This video is exactly what I needed.
you're the man, all your videos are clear and with a lot of knowledge
Jack, your channel is amazing! Thank you so much!
Men, your videos inspires me a lot. Thank you!!
that IDE font is like hieroglyphics, I need a lookup table just to decipher it 😂😂😂
This is premium content. Thank you.
Your improving every video it's awesome to see and we learn awesome things as well
Jack Awesome tutorial and I'm looking mutation concept as well.
I have fun and learn with you Jack. Thanks a lot. I have fun and learn with you Jack. hug!!!
Thank you! Hugs back!
This is total fire Jack!!! Thanks a lot!
could we get an update to this on how to do it with the new react-query version and the new apollo 4 that deprecates apollo-server-micro?
Let's goooo!!!!!! 💎💎💎💎 Love this man's videos
Excelente aula Jack. Procurei por algo e achei muito mais no seu canal. Muito obrigado.
Excellent class Jack. I search for one thing and I found much more in your channel. Thanks a lot.
love it you're channel is a gem sir!
you are always NUMBER one reference on framework/library... whether Nexus or Type-GraphQL the boilerPlate is too dense, what's wrong with classic REST API :D !?
Can you add prisma in your demo next time instead of using in memory json file ?
wow, good work this is awesome, unbelievable useful and concise
Jack, you are awesome , man! Please, please, keep going!
Ok this is great content. really like this kinda videos. just end to end project. brilliant stuff. thank you so much.
Wow!!! I mean... wow wow!!! Like You read in my mind - I was looking for that - great content. Thanks!
In your tsconfig.json file you kept "strict" at false. Took me an extra step to make sure I had type safety. Nice video Jack!
This is very nice. Great libraries used
This guy is amazing, Thanks again Jack.
Super interesting content! I love the way you create apps! Keep rocking ;)
Awesome, but what would you say is the benefit of using TRPC over Typegraphql or Nexus?
Seems to me, that these later two libs add type safety to a common approved standard (and language-agnostic) such as graphql.
I don't really see any benefit of TRPC over GraphQL. When I did a video on TRPC my take on it was that it was a good way to get an end-to-end typed API mechanism if you did NOT want to do GraphQL.
Awesome! Thanks Jack!!
great content which makes me different and professional than others, THANKS SIR! your follower from PAKISTAN
Awesome as always
Thank you for this video. Will there be no impact on performance when to placing a graphql server in next.js backend handler?
There is always going to be an impact in performance by adding code. And yes a GraphQL server has to parse the incoming query each time. The question is whether that performance hit outweighs the architectural gains, and that only something you can deduce for your project. That's why they pay you the big bucks. :)
Could you explain what we're accomplishing in getServerSideProps with the prefetchQuery and dehydratedState? While playing around trying to figure it out, I commented out the entire getServerSideProps function and my page still worked just the same.
I'm also curious about the next step where I would add an ORM (I'm trying out MikroORM) so that the graphql resolvers can reach out to a database. Once I have access to my database in the application, is there any benefit to making a graphql query inside getServerSideProps over just using the ORM directly?
Have a look at "View Page Source" on the page without the getServerSideProps and then re-enable getServerSideProps and try again. The difference is that the page is "server side rendered" when we use the getServerSideProps.
So when we request the page we make the request on the server, then we render the page with the data on the server. The page includes both the HTML for the page and also the serialized state. That serialized state is then rehydrated on the client and when we do the React Query hook on the client we use the serialized state for the request instead of making the request again on the client.
Could you please make a video for NextJS and Firebase as well?
Hi Jack. I found your awesome channel earlier this year when I was searching for Typescript resources, and it's been a fun ride.
I have question. I'm integrating GraphQL in my nextjs project using this video.
I want to use the Apollo studio to test my endpoints, but have been running into cors issues.
I've done some research using the Apollo docs, Nextjs and stack overflow, but the solutions suggested did not work.
I'd like to know if you've encountered it, and how you were able to resolve it. Thanks.
I have and I end up just using Altair GraphQL.
@@jherr Yeah, Thanks. I'll check it out. I just resolved the issue and was about to post here when I saw your comment 😀
@@iamprincemuel How did you manage to resolve it?
@@merone351 I'm trying to help but RUclips keeps deleting my comment
@@iamprincemuel would editing your old comment work? Or is it a url problem?
Thank you Jack because you are sharing this kind of information with us!
P.S I'm coding along with you!
Thanks for posting this video! I'm really interested in these topics!! I got stuck where you tested your getDogs query. Firstly, the graphql vscode extension didn't give me the "Execute Query" tooltip to click on. I noticed this on their Github page "NO LONGER SUPPORTED - execute query...we will be recommending other extensions for this." I tried to execute the getDogs query by copy pasting it into the apollo webclient at /api/graphql but I got these errors: 'Cannot query field "dogs" on type "Query".' and "TypeError Failed to fetch". I'm curious if you may know why this isn't working on my end.
I heard something about that, I love that the feature set of the extension changes like a week after I publish the video. Two questions, does the generator still work? It does for me. Also would you mind trying the GraphiQL desktop app (www.electronjs.org/apps/graphiql) to see if that works. You should just be able to point it at the localhost:3000/api/graphql endpoint and it should work. If it doesn't please let me know.
@@jherr 🤦♂It worked! I was trying to find out how to use GraphiQL and I couldn't find a good / recent article. It's been a couple years since I really messed around with GraphQL and I thought maybe GraphiQL had been depricated or this new studio.apollographql was new the new "hot thing". Super annoying that the client Apollo provides you with doesn't work 🙄Thanks for the fast response!! I was pulling my hair out over here...
I agree super annoying about the graphql extension and the timing lol. Guess that's life in the web dev tutorial game. We feel it on the viewer's side as well *sigh* Looked like an awesome feature! I'll be checking back on their github to see which extensions they recommend. Also if you find a cool one, please do a video on it and let us know. Thanks again!
@@classyboy2000 Let me know if you find something good and I'll pin it in the comments and the next time I talk about GraphQL I'll use that instead. :) Thanks for your viewership!
@@jherr looks like the extension has moved to Its been moved to - Inline Operation Execution by GraphQL Foundation. The electron all link posted also seems broken. Thanks again for making all the great content!
Thank you Jack. Its good material nice day
Great content, as always! One question: how would one run unit tests against the dogs.ts file?
There really isn't a lot going on in dogs.ts, but if I wanted to do that I'd instantiate each class and test it's get/sets.
31:23 'It's like a finger pointing away to the moon. Don't concentrate on the finger or you will miss all that heavenly glory.'
it was a very helful video, thanks a lot
Thank you !! This is very helpful , Can you do the same with Reactjs with e2e deployment all the way to AWS using github actions pipeline using aws cli or terraform
also , very curious to find out what gear/software do you use to record these tutorials?
Really awesome content, thank you!
Awesome, fantastic, thanks so much,
i have a question,
i need build and run Next.js app in another computer, this is a suggestion video,
for example, i need run this app in a windows desktop, how can make this without my source code?
i will run only builded code on another computer(my client).
thanks.
Personally I would Dockerize it.
This is a perfect video!!! But I think we don't need that react-query plugin for codegen. you installed codegen library for react query which is used to create custom hooks, but you used the plain normal react query useQuery hook anyways. you didn't add the plugin in codegen.yml too.
You are correct.
Hello small question, at 5:10 you use new ApolloServer, seeing that nextjs re-runs this code every time ew call the API endpoint, wouldn't it be better to use a Singleton in that instance ?
could you share your zsh configuration? I'd like to have a fancy terminal like you do.
gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72
@@jherr thank you x 100!
Solid video, thanks! One small thing, I think for the dog by name query you'd want the query key to be ["dog", name] so that every dog doesn't have the same query key, no?
Great content, Jack! Have you had the time to look at the new GraphQL Yoga 2.0?
Oh, they're back with a 2.0? I'll check that out.
cool vid. i'm wondering the performance implication of running a server inside a serverless function.
I don't think it actually is running a server. I think the start is just initializing it.
@@jherr okay cool
Could you talk about mutating and pushing something to graphql?
why use react-query on top of graphql? Isnt it more beneficial to use a client that supports graphql first class? You have the benefits of co-location which lead to graphql fragments for better data dependencies per component thus more fine-grained caching (fetching it's mounted for example).
Also, since you already use graphql codegen, you can generate hooks to fetch the data, in your example, the codegen can generate useGetDogsQuery() that can be called in both server/client env, the rehydrating needs to be stitched more manually though, you have this video i think :)
How can you call query hooks in getServerSideProps?
can you make a video about professional grade app setup using next.js, redux with rest api please
How come with NextJS apps the backend server and the frontend client aren't built with two different directories/repos? Wouldn't you want to host the frontend and the backend with different services for a webapp?
Amazing content🙂
Can you please do an updated version of this?
I did know that it was a back drop!
Can you create a production grade NextJs SSR Authentication (with login, protected routes and redirect) using Firebase as the auth service..?
Hey is there a way you could send me a link or something to get my zsh to look similar to yours? I think its the agnoster theme but I can't get mine to look as crisp as yours -- wondering if you can save me time lol?
This should do it: gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72 If I've left anything out let me know.
Your tutorial is very good, if possible make a premium course
Could someone please explain the significance of the bodyParser: false ? I've seen it used in other videos but lack the context
How should i deploy it?...after npm build it shows fetcherror request to ...3000/api/graphql
will this work when API routes are deployed to AWS lambdas...
if it does this really might be an extremely seamless dx for a modern web app.
Yeah, the GraphQL APIs are deployed as lambas to Vercel. If you use the serverless plugin for AWS they will be deployed as edge lambdas.
@@jherr Thanks for the prompt reply..
amazing !
this is the greatest!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
How would authentication fit into this? Would we have to alter the codegen file?
No, that would come in as part of the react-query configuration.
any chances for another video with "how to implement user authentication" on app built in this video?
Problem is that there are a ton of different auth vendors out there, so... which one?
@@jherr oh if I may suggest, I would say, JWT with token refresh, but without any 3rd solutions?
or since it's NextJS, next auth?
lets go 50k subs
How can I implement file upload. I mean we used to use "graphql-upload" in Custom nodejs backend but in here, how?
So you used to use something called `graphql-upload` but now it doesn't work or something? Or it never worked? Confused.
I can't find that awesome GraphQL extension, for the life of me... I installed two, from "Graphql Foundation", and i can't get the querying inside the editor to work.... could you help, maybe send a direct link from the marketplace? Thanks for everything as always
Its been moved to - GraphQL: Inline Operation Execution by GraphQL Foundation
Can you show how to do mutations with this setup? I'm having trouble finding documentation codegen with 'typescript-graphql-request'
Did you ever figure this out? Also having trouble
Why use typegraph-ql and still need to generate typescript types?
Yeah, I wish we could just use the classes directly for typing. But the problem is that the classes are typing data, and what the client needs typed are the queries, which may not 1-to-1 reflect the data. Plus, this way you could actually break the API out into its own server if you chose to do that.
While rendering the ui with data I'm fetching from my own backend, I'm getting this error: Error: Hydration failed because the initial UI does not match what was rendered on the server.
When I switch back to react version 17, this error isn't there anymore. Do you know how I can solve this? I really want to use react 18's new features.
I'll look into it. Me too.
@@jherr Thank you! I sort of solved it by adding a typeof window !== "undefined" to the return statement on the indexpage, like this:
return {typeof window !== "undefined" && events.map((e) => e.slug)};
However, it doesn't seem very logical to do this on every page. Do you have a suggestion on where to put this logic? If it's even the right way of fixing this for now. Thanks for your help 🙏
yesssssss
Any plans to update to apollo server 4? Thx
visual studio code 's font ,that is very pretty,can you tell me?
❤fire
GraphQL extension crashed at VSCode , has anyone same issue ?
Thanks for the video 🙌
but i can't use the Graphql extension properly, the execute link doesn't even when i cloned the video repo.
I have the same issue.
@@kennethmatovu4487 idk why setting up graphql is so hard like this 🤔
Great!
Great content.
Too many beguinner tutorials, we professionnal thing.
Pls make similar video for faunadb project
Please Jack can you please make the javascript version , i am so weak in typescript and i am totally confused :(
Hi Jack! Can we hope for a new new episode of the video?
how to setup terminal like you?
😎
First attendance 🙌🏻
I dont see the execute button on my vscode
Great video but some of your commands are typed so fast its impossible to see. For a newbie who does not know all the dependency commands etc it would be great if you slowed it down a bit. Other then the thanks
why downgrade graphql to 15.3.0 , 16.0 is not good ?
Vscode theme?
Night Wolf [black] and Operator Mono.