Unable to Setup Next.js 14 with Apollo Client GraphQL

Question

Unable to Setup Next.js 14 with Apollo Client GraphQL

146 Views Asked by Kevin Smith At 04 November 2025 at 11:09

I am new to Next.js & GraphQL, need to work on a project using both. So trying to setup a dummy project with Next.js(JavaScript, React), Apollo Client, Apollo Server. The Server side is up and running without hassle. But Client side is not able to load Apollo Server data in UI, I was able create a basic API call from client side and load the data but not able to make it render using ApolloProvider / ApolloWrapper.

I have tried to follow many articles available online, but none worked. The final one which looked promising and easy but written for TypeScript - Medium Article & Repo. I tried to follow it but still getting below error:

Error Message

src/app/layout.js

import { Inter } from "next/font/google";
import "./globals.css";
import { ApolloProvider } from "@apollo/client";
// import { ApolloWrapper } from "../lib/apollo-wrapper";
import client from "../lib/client";


const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
      <html lang="en">
        <body className={inter.className}>
          <ApolloProvider client={client}>{children}</ApolloProvider>
        </body>
      </html>
  );
}

src/lib/client.js

import { ApolloClient, HttpLink, InMemoryCache, from } from "@apollo/client";

const httpLink = new HttpLink({
  uri: '/'
})

const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: "http://localhost:4000/",
    link: from([httpLink])
  });
  
export default client;

Dependencies from package.json

  "dependencies": {
    "@apollo/client": "^3.9.0-rc.1",
    "@apollo/experimental-nextjs-app-support": "^0.8.0",
    "graphql": "^16.8.1",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }

Original Q&A

There are 1 best solutions below

**0xKevin** · Accepted Answer

If you want to use Apollo Client with the App Router, you have to use it with the @apollo/experimental-nextjs-app-support library. Refer to this post - NextJS (AppRouter), Apollo (Client), error on using ApolloProvider in root layout

Seems like you added @apollo/experimental-nextjs-app-support in your dependencies but didn't use it at all. Also, your @apollo/client library may need to be updated to the latest version - npm install @apollo/client@latest

To wrap your RootLayout with ApolloProvider, try following (refer to https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support for more info):

First, create a new file src/app/ApolloWrapper.jsx:

"use client";

import { ApolloLink, HttpLink } from "@apollo/client";
import {
  ApolloNextAppProvider,
  NextSSRInMemoryCache,
  NextSSRApolloClient,
  SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";

function makeClient() {
  const httpLink = new HttpLink({
    uri: "http://localhost:4000/api/graphql",
    fetchOptions: { cache: "no-store" },
  });

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

export function ApolloWrapper({ children }) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

Now you can wrap your RootLayout in this wrapper component in the src/app/layout.js file:

import { Inter } from "next/font/google";
import "./globals.css";
import { ApolloWrapper } from "./ApolloWrapper";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ApolloWrapper>{children}</ApolloWrapper>
      </body>
    </html>
  );
}

Unable to Setup Next.js 14 with Apollo Client GraphQL

There are 1 best solutions below

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in APOLLO-CLIENT

Related Questions in GRAPHQLCLIENT

Trending Questions

Popular # Hahtags

Popular Questions