GraphQL with Next.js 13 Server Components

Fetch data from a GraphQL backend using Next.js 13 server components.
Learn more about #GraphQL #Nextjs #servercomponents : graphql.wtf/ep...

[@rapid-ruby]

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.

[@HtetMyat79]

need scord code

[@t3ntube357]

This is really what I was looking for, thank you ♥

[@alisalimli]

Same

[@jonathanvandenberg3571]

Nice! Let's get this Next13 going...I found you in Hygraph :) Awesome stuff!

[@dogcodes]

Quick off topic question what font are you using it looks gorgeous

[@ryanyu4748]

Thanks for the great video! I am just wondering how you would go about ISR with GraphQL?

[@arafatislam4648]

The cache is missing

[@adamwheatley3372]

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.

[@howuseehim]

I have tried to make his approach works but failed miserably. Trying to make it works with WordPress

[@notrab]

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.

[@ReuelTeodoro]

Is there an Apollo client version of this

[@AhmadSheraz-c6q]

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."

[@K127able]

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?

[@notrab]

I haven't used Next (or 13) quite in-depth for some time to give a good enough answer here.

[@creatorsremose]

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.

[@LQT1102]

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.

[@aristide_F]

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

[@AhmadSheraz-c6q]

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."

[@notrab]

You can pass it the fetch from the built in fetch and it should work?

[@Coder719]

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?

[@notrab]

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.

[@codeadvocacy]

hey have you find any solution? please let me know any example

[@Tyheir]

Next auth

[@AnanthM-y7f]

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

[@notrab]

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 🙁

[@AnanthM-y7f]

​@@notrab How about urql +next.js app router with authentication ? 😊

[@miraclehesed8959]

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.

[@itsyashsahu]

Can you please provide link for this repo

[@notrab]

Hey the link can be found at graphql.wtf/episodes/66-graphql-with-nextjs-13-server-components

[@ricardomartins558]

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]

What didn’t work with Fetch and Codegen?

[@ricardomartins558]

​@@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

[@ameeruljunaidi6123]

Did you figure out a way to get Apollo to work?

[@RicardoMartins84]

@@ameeruljunaidi6123 no. I gave up for now, and will use pure fetch instead.

[@ameeruljunaidi6123]

@@RicardoMartins84 same here. I’m trying out SWR rn for caching and other stuff. Might be a good alternative for you too.

[@daavidaviid]

Do you think it could be done using Apollo too both for RSC and client components?

[@notrab]

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

[@user-gr2ft9ed2s]

Name of this Theme pls 😀

[@notrab]

This is GitHub Dark 😍

[@rahulpradhan2666]

I want to mutation in of graphql inside a client component of next.js

[@notrab]

You can fetch there too