This is really cool, GraphQL codegen looks much nicer to work with now! I'm gonna have to check out Next 13 soon as well, server components look awesome.
Do you have any sort of way, even if in a limited way, to use apollo with nextjs? The old approach of passing pageProps to hydrate the cache is now not possible and i am a bit stumped on what to do.
I’m not sure how yet, at least from what I’ve been reading it’s rather challenging with server components as there doesn’t seem to be a mutation API. But I think that’s coming and will help unlock the possibility.
I always get the following error while using Next.js 14, apparently graphqlClient.request is not something that I can use. Please help "Cannot access document.definitions on the server. You cannot dot into a client module from a server component."
Hey, nice explanation. I implemented it in my project, however I encountered a problem. Next13 promotes an approach to have fetches in multiple places (in one render) and relies on react cache to perform only one request. This doesnt seem to work because u pass an object to the function (which is different each time). Other solutions rely on internal cache which also isnt a solution, bc I would need to invalidate all the caches after each render. Any ideas how to fix this problem?
Use a full featured GraphQL client (like Apollo). The caching mechanism there relies on the query's signature (instead of reference) and is actually quite good.
how to query properties from returned results? for example i only need "id" and don't need "title". If I remove 'title' then typescript throws an error.
Hello Jamie please i need some help, please. i have had a hard time using Urql with nextjs server components in order to make requests from the server. converting my component to a client component works pretty well but i want some queries obtained from the server. Can i use your expertise? Please
I always get the following error when using it with Next.js 14. Apparently graphqlClient.request is not something we can use now. "Cannot access document.definitions on the server. You cannot dot into a client module from a server component."
Nextjs 13.4 is very cool. I tried with Nextjs.13 ( app folder ) with appolo-client, graphql, appolo-server with prisma , but struggling to find properly working examples for basic jwt- based (credentials) authentication flow with Auth0 or 3rd party systems. Any example you know?
I've not been using Next.js for a while now so I'm a little rusty but I seen you posted on /r/graphql so perhaps someone has more details to share over there.
There will be too many request if we go with graphql-request and that can be sorted out with cache impl, Could you make a video with apollo-client that helps production grade apps
You could pass the Next.ja fetch implementation to graphql-request and tag requests. It’ll then be cached and you can invalidateTag when later mutated. I no longer use Apollo Client so I wouldn’t be best positioned to record a video on that I would be happy with 🙁
From what I read about the description for grahic-ql requests it states it's used for simple apps. What I'm building ain't simple. What do I need in replacement from that? Ok. No need. Apollo client will do the trick.
I'm trying to use codegen with Next.js 13 without TypeScript... Initially I was just trying to consume some GraphQL APIs with Apollo, but I think I'm going with the new Next fecth api. =/ I failed using codegen with vanilla js.
@@notrab fetch works well, but it feels like messy.. maybe it's my bad... Codegen.. I couldn't make it work without ts support. Apollo .. I can make it work until I need to use useQuery.. I couldn't find a way to wrap the main component in the layout file in Nextjs 13
This is really cool, GraphQL codegen looks much nicer to work with now! I'm gonna have to check out Next 13 soon as well, server components look awesome.
need scord code
This is really what I was looking for, thank you ♥
Same
Nice! Let's get this Next13 going...I found you in Hygraph :) Awesome stuff!
Quick off topic question what font are you using it looks gorgeous
Thanks for the great video! I am just wondering how you would go about ISR with GraphQL?
The cache is missing
Do you have any sort of way, even if in a limited way, to use apollo with nextjs? The old approach of passing pageProps to hydrate the cache is now not possible and i am a bit stumped on what to do.
I have tried to make his approach works but failed miserably. Trying to make it works with WordPress
I’m not sure how yet, at least from what I’ve been reading it’s rather challenging with server components as there doesn’t seem to be a mutation API. But I think that’s coming and will help unlock the possibility.
Is there an Apollo client version of this
I always get the following error while using Next.js 14, apparently graphqlClient.request is not something that I can use. Please help
"Cannot access document.definitions on the server. You cannot dot into a client module from a server component."
Hey, nice explanation. I implemented it in my project, however I encountered a problem. Next13 promotes an approach to have fetches in multiple places (in one render) and relies on react cache to perform only one request. This doesnt seem to work because u pass an object to the function (which is different each time). Other solutions rely on internal cache which also isnt a solution, bc I would need to invalidate all the caches after each render. Any ideas how to fix this problem?
I haven't used Next (or 13) quite in-depth for some time to give a good enough answer here.
Use a full featured GraphQL client (like Apollo). The caching mechanism there relies on the query's signature (instead of reference) and is actually quite good.
how to query properties from returned results? for example i only need "id" and don't need "title". If I remove 'title' then typescript throws an error.
Hello Jamie please i need some help, please. i have had a hard time using Urql with nextjs server components in order to make requests from the server. converting my component to a client component works pretty well but i want some queries obtained from the server. Can i use your expertise? Please
I always get the following error when using it with Next.js 14. Apparently graphqlClient.request is not something we can use now.
"Cannot access document.definitions on the server. You cannot dot into a client module from a server component."
You can pass it the fetch from the built in fetch and it should work?
Nextjs 13.4 is very cool. I tried with Nextjs.13 ( app folder ) with appolo-client, graphql, appolo-server with prisma , but struggling to find properly working examples for basic jwt- based (credentials) authentication flow with Auth0 or 3rd party systems. Any example you know?
I've not been using Next.js for a while now so I'm a little rusty but I seen you posted on /r/graphql so perhaps someone has more details to share over there.
hey have you find any solution? please let me know any example
Next auth
There will be too many request if we go with graphql-request and that can be sorted out with cache impl, Could you make a video with apollo-client that helps production grade apps
You could pass the Next.ja fetch implementation to graphql-request and tag requests. It’ll then be cached and you can invalidateTag when later mutated.
I no longer use Apollo Client so I wouldn’t be best positioned to record a video on that I would be happy with 🙁
@@notrab How about urql +next.js app router with authentication ? 😊
From what I read about the description for grahic-ql requests it states it's used for simple apps. What I'm building ain't simple. What do I need in replacement from that?
Ok. No need. Apollo client will do the trick.
Can you please provide link for this repo
Hey the link can be found at graphql.wtf/episodes/66-graphql-with-nextjs-13-server-components
I'm trying to use codegen with Next.js 13 without TypeScript... Initially I was just trying to consume some GraphQL APIs with Apollo, but I think I'm going with the new Next fecth api. =/
I failed using codegen with vanilla js.
What didn’t work with Fetch and Codegen?
@@notrab fetch works well, but it feels like messy.. maybe it's my bad...
Codegen.. I couldn't make it work without ts support.
Apollo .. I can make it work until I need to use useQuery.. I couldn't find a way to wrap the main component in the layout file in Nextjs 13
Did you figure out a way to get Apollo to work?
@@ameeruljunaidi6123 no. I gave up for now, and will use pure fetch instead.
@@RicardoMartins84 same here. I’m trying out SWR rn for caching and other stuff. Might be a good alternative for you too.
Do you think it could be done using Apollo too both for RSC and client components?
Hopefully. Right now I think it’s quite tricky to do how we are used to using RSC and lack of mutation api in next
Name of this Theme pls 😀
This is GitHub Dark 😍
I want to mutation in of graphql inside a client component of next.js
You can fetch there too