Using Apollo Client with Next.js 13 and Server Components | Patrick Arminio | GraphQL Wroclaw #13

Next.js 13 introduced significant new features, including the app directory (beta), which includes support for layouts and React Server Components. React Server Components enable data fetching on the server, reducing the need for client-side fetches. This talk discusses how to use Apollo Client in Server Components, what are the tradeoffs of using Server Components with Apollo Client.
***
This talk was given during one of the editions of GraphQL Wroclaw Meetup. Join our community, take part in following events and gain access to the GraphQL knowledge library.
👥 Meetup Group - www.meetup.com...
🌐 Website - graphqlwroclaw...
🚀 Twitter - / graphqlwroclaw

[@NaveenKumarasinghe]

This information about using the client directly is very rare to find. Thanks Patrick!

Thanks for sharing. I see the benefit of server components, but it gives me chills implementing them. The availability of information and support is still something that needs to mature and grow.

[@anthonybillon1360]

Love it, thank you! I'll still keep most of my implementation as client components to avoid problems (it's almost impossible to do otherwise with Auth0 anyway)

[@harissarwar]

Thanks a lot. I just started using NextJS and your video answers all of my questions in 25 mins. Awesome -)

[@piotrszczesniak]

Great and content heavy talk! Patrick, you gave me solutions to problems I've been facing now building my Headless WordPress with Next.js - for this purpose Apollo Client with GraphQL make it super easy to fetch data from WordPress. Thank you!

[@siamahnaf6760]

Love from Bangladesh Patrick Arminio. You are great, Patrick!😊

[@shrishah4706]

amazing talk

[@mauriciabad]

Great video, it helped me setup Apollo with next.js 13 ssr

[@freddiemotion]

Great video! Very insightful. I think one of the greatest advantages that Apollo has is client side caching. Trying to use the apollo client directly instead of hooks on the server component as you mentioned does not look like the best option, cause why not just use the fetch API directly instead (unless you guys found a good way to pass that to the client side for caching). Also, in 23:40 you mentioned there's no way to send a request to a server component and that it responds, but I think server actions kinda solve that, am I wrong? Anyway, thanks for all the good info.

[@khan.hassan]

Great Thanks ♥

[@RodrigoMedina-k9v]

Great video, I've been struggling with this and your content really helped me fixed my cache issues !!

[@mahatohariom]

is the experimental library is good to use ,does it change the way of using it once it get stable

[@djET0]

21:27 if u want to see how revalidate on graphql client

[@alexshi9320]

This still doesn't work for me. The whole situation feels like a catch 22. Let me explain why:
1. You can't call a mutation with the client workaround within a server component if let's say you want a on click event handler to make the mutation call. You also can't use the useMutation hook inside a client component for the following reason:
2. You can't even use the ApolloProvider even if you use a use client directive since you need to fetch the client, but to get the client you need a server component, but when you switch over to server component the ApolloProvider API won't work due to it's use of useContext.
Has anyone found a solution to circumvent this?

[@itspez2147]

at this point just fetch it, for now it's best to just use graphql-request till they add it

[@djET0]

@@itspez2147but with graphql-request u cannot use revalidation , or im wrong?

[@coreybyrum]

Great talk, Patrick! I'd love to hear your thoughts on how NextJS 14 and server actions change the usage of server components.