Error: The SSR build of ApolloNextAppProvider cannot be used outside of the Next App Router!

[pabl-o-ce]

Hello,

I'm having this issue trying to use the lib to handle Apollo client in Nextjs (pages router)

currently I have implemented this:

lib/apollo-client.tsx

import { createHttpLink, ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support";

// Note the change in the URI
// Relative path to your GraphQL API
const graphqlUri = '/api/graphql';

const httpLink = createHttpLink({
    uri: graphqlUri, // Update this if your GraphQL endpoint is different
  });

const authLink = setContext((_, { headers }) => {
    // Get the authentication token from local storage if it exists
    const token = localStorage.getItem("authToken");
    // Return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      },
    };
  });

export const { getClient, query, PreloadQuery } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: authLink.concat(httpLink),
  });
});

lib/apollo-wrapper.tsx

"use client";

import { ReactNode } from "react";
import { ApolloLink, HttpLink } from "@apollo/client";
import {
  ApolloNextAppProvider,
  ApolloClient,
  InMemoryCache,
} from "@apollo/experimental-nextjs-app-support";

// Note the change in the URI
// Relative path to your GraphQL API
const graphqlUri = '/api/graphql';

const client=()=>{
  const httpLink = new HttpLink({
    uri: graphqlUri,
    fetchOptions: { cache: "no-store" },
  });

  return new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink,
  });
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={client}>
      {children}
    </ApolloNextAppProvider>
  );
}

components/layout.tsx

import { ApolloWrapper } from "@/lib/apollo-wrapper";
import { Logo } from "../ui/logo";
import { ModeToggle } from "../ui/toggle";

const AuthLayout = ({ children }: any) => {

    return (
        <div className="h-full flex flex-col justify-center">
            <Logo></Logo>
            <ApolloWrapper>
                {children}
            </ApolloWrapper>
            <span className="absolute bottom-1 left-1">
                <ModeToggle></ModeToggle>
            </span>
        </div>
    );
};

export { AuthLayout };

This work at first time but never again now show me a error:

Server Error

Error: The SSR build of ApolloNextAppProvider cannot be used outside of the Next App Router!
If you encounter this in a test, make sure that your tests are using the browser build by adding the "browser" import condition to your test setup.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
useInsertHtml
file:/Users/user1/Dev/next/node_modules/.pnpm/@apollo+experimental-nextjs-app-support@0.11.3_@apollo+client@3.11.8_@types+react@18.2.21_gra_ontxfajivzpz76p4puxvjcaai4/node_modules/@apollo/experimental-nextjs-app-support/dist/index.ssr.js (36:15)
ManualDataTransportSSRImpl
file:/Users/user1/Dev/next/node_modules/.pnpm/@apollo+client-react-streaming@0.11.3_@apollo+client@3.11.8_@types+react@18.2.21_graphql@16.9_wh6j634ctorrcjhlu4sqtqdi2u/node_modules/@apollo/client-react-streaming/dist/manual-transport.ssr.js (134:22)

Can you show me some give how to solved

Thank u!

Tasks

Preview Give feedback

No tasks being tracked yet.

[phryneas]

Hi @pabl-o-ce,
the name of this package is @apollo/experimental-nextjs-app-support.

It's meant to add support for the App router of Next.js, it does not work with the old Pages router. That one didn't need an additional package to make Apollo Client work.

Unfortunately, Next.js is at this point deleting all the example repos that show how to use various libraries with the Pages router, but you can find an example setup here: https://github.com/apollographql/next-apollo-example

[pabl-o-ce]

Hello @phryneas

Thank u for the response and the clarification about the package.

Sorry the confusion.

🙃

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.