typescriptnext.jsgraphqlapollo-clientapollo-server

Using Apollo client wrapper in Next.js 14 App router

I am using Next.js 14 (App router) for my react project. I need to use Graphql. I also have the Apollo server set up. As a complete beginner, quite confused as to which directory to create which file. I have installed Apollo client and have app\util\apolloClient.ts So in order to wrap with Apollo provider, is it layout.js or page.js . I don't have 'src' folder. Please advise. Also, how do I get around getting the configuration for the graphql from json ?

Solution

  • With the app router, you have to use the @apollo/experimental-nextjs-app-support package.

    Just follow the setup instructions in the README, and make sure to use the useSuspenseQuery hook instead of the useQuery hook in your application to get the most out of SSR.