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/GraphQL-Wroclaw/
🌐 Website - graphqlwroclaw.org/
🚀 Twitter - / graphqlwroclaw

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.

[@NaveenKumarasinghe]

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

[@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!

[@harissarwar]

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

[@coreybyrum]

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

[@siamahnaf6760]

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

[@user-mx8vv2un9r]

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

[@shrishah4706]

amazing talk

[@mauriciabad]

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

[@khan.hassan]

Great Thanks ♥

[@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.

[@user-xu1zy7pn2q]

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?