registerApolloClient is not a function (Runtime error) #268

NickVilaribov · 2024-04-03T10:26:47Z

Hey there. This is a first time I'm using Next JS 14 and Apollo client. I've done ApolloProvider and apollo-client.ts like in the documentation.
In MainIntro I use an SSR request to preload the data that I use in the child component. The Header component must be client-side because I'm going to use hooks. As soon as I add "use client" to Header.tsx, I get the described error. Please help, below I post the component code and errors.

error

apollo-client.ts

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

export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      // this needs to be an absolute url, as relative urls cannot be used in SSR
      uri: process.env.API_URL,
      // you can disable result caching here if you want to
      // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
      // fetchOptions: { cache: "no-store" },
    }),
  });
});

apollo-wrapper.tsx

"use client";
// ^ this file needs the "use client" pragma

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

// have a function to create a client for you
function makeClient() {
  const httpLink = new HttpLink({
    // this needs to be an absolute url, as relative urls cannot be used in SSR
    uri: "http://localhost:3000/api/graphql",
    // you can disable result caching here if you want to
    // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
    fetchOptions: { cache: "no-store" },
    // you can override the default `fetchOptions` on a per query basis
    // via the `context` property on the options passed as a second argument
    // to an Apollo Client data fetching hook, e.g.:
    // const { data } = useSuspenseQuery(MY_QUERY, { context: { fetchOptions: { cache: "force-cache" }}});
  });

  return new NextSSRApolloClient({
    // use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            // in a SSR environment, if you use multipart features like
            // @defer, you need to decide how to handle these.
            // This strips all interfaces with a `@defer` directive from your queries.
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

// you need to create a component to wrap your app in
export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

lauout.tsx

export default function RootLayout({
  children,
  params: { locale },
}: Readonly<Props>) {
  return (
    <html lang={locale}>
      <body className={inter.className}>
        <ApolloWrapper>
          <Header />
          <main>{children}</main>
          <Footer />
        </ApolloWrapper>
      </body>
    </html>
  );
}

page.tsx

import { MainIntro } from "@/components";

const HomePage = () => {

  return (
    <>
      <MainIntro />
    </>
  );
};

export default HomePage;

MainIntro.tsx

import { gql } from "@apollo/client";
import { getTranslations, getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
import pick from "lodash/pick";
import { getClient } from "@/configs";
import { Container } from "@/components";
import { FilterClient } from "./components";
import styles from "./MainIntro.module.css";

const MainIntro = async () => {
  const t = await getTranslations("Homepage");
  const messages = await getMessages();
  const { data } = await getClient().query({
    query: FILTER_QUERY,
    context: {
      fetchOptions: {
        next: { revalidate: 3600 },
      },
    },
  });

  return (
    <section className={styles.section}>
      <Container className={styles.container}>
        <h1 className={styles.title}>{t("title")}</h1>
        <p className={styles.description}>
          Discover your perfect match in healthcare with our service, where
          finding a trusted specialist is both convenient and swift, ensuring
          peace of mind with every choice
        </p>
        <NextIntlClientProvider messages={pick(messages, "Global")}>
          <FilterClient data={data} />
        </NextIntlClientProvider>
      </Container>
    </section>
  );
};

const FILTER_QUERY = gql`
  query Query {
    countries {
      id
      code
    }
    specialties {
      id
      key
    }
  }
`;

export default MainIntro;

header.tsx

"use client"
import React from "react";
import Link from "next/link";
import Image from "next/image";
import styles from "./header.module.css";
import { Container } from "@/components";
import { LangSwitcher } from "./components";

type Props = {
  simple?: boolean;
};

const Header:React.FC<Props> = ({ simple }) => {
  return (
    <header className={styles.section}>
      <Container className={styles.wrapper}>
        <Link href="/" className={styles.logo} aria-label="Veso Health Logo">
          <Image
            src="/veso-logo.svg"
            width={103}
            height={34}
            alt="Veso Health Logo"
            priority={true}
          />
        </Link>
        {!simple && <LangSwitcher />}
      </Container>
    </header>
  );
};

export default Header;

phryneas · 2024-04-03T10:34:41Z

This would happen if you import registerApolloClient from a Client Component import tree.

Do you import apollo-client.ts from a file that is marked as "use client", or from a file that imports from a file (etc.) that is marked as "use client"?

NickVilaribov · 2024-04-03T10:40:12Z

This would happen if you import registerApolloClient from a Client Component import tree.

Do you import apollo-client.ts from a file that is marked as "use client", or from a file that imports from a file (etc.) that is marked as "use client"?

No,

phryneas · 2024-04-03T10:41:27Z

Are you building for Edge functions?

NickVilaribov · 2024-04-03T10:49:05Z

Are you building for Edge functions?

Sorry, don't get it. What is Edge functions? It's really small app, I use only next-intl and apollo client.

phryneas · 2024-04-03T10:50:54Z

Okay, obviously not :)

I think we need to get back to my previous question:

I see that you re-export getClient from "@/configs" - do you ever import "@/configs" from a "use client" file, or from a file that is imported from a "use client" file, and so on?

NickVilaribov · 2024-04-03T10:57:09Z

@/configs

No, I only use import from "@/configs" in Layout.tsx and MainIntro.tsx. And both of them don't use "use client". It's really strange, inside MainIntro.tsx i use FilterClient.tsx components and it's client component.

NickVilaribov · 2024-04-03T11:06:58Z

@phryneas https://github.com/NickVilaribov/veso-test

phryneas · 2024-04-03T11:10:09Z

Something seems to pull your server component file into client components here :/

Generally, Next.js build two independent versions of your app:

One for Server Components - this starts at your page and includes all files imported from there, but stops at "boundaries" designated by "use client".
One for Client Components - this starts at every "use client" boundary and includes all files imported from these files, and files imported by those, and so on.

Internally, these import completely different files for the same import statement.

So, if you call import { ... } from '@apollo/experimental-app-support/rsc', from the "RSC side", it points to the file which contains the registerApolloClient method. If you call the same import from the "Client side", it just points to an empty file, because registerApolloClient uses React.cache, which works only in React Server Components (and also doesn't make sense in Client Components).
That's that you experience here right now.

React itself does the same. If you import { ... } from 'react' from the Client side, you will be able to import useState - but if you import it from the RSC side, useState won't be there.

NickVilaribov · 2024-04-03T11:15:22Z

Got it. It happens when I add "use client" on the Header.tsx file. Without this all works fine. Do you have any ideal how to solve it?

phryneas · 2024-04-03T11:16:06Z

Your Header.tsx imports from "@/components", which imports from "./main-intro", which imports from "./MainIntro", which imports from "@/configs" which calls import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc".

You have to stop using these index.ts files that mix server components and client components.

NickVilaribov · 2024-04-03T11:20:12Z

Your Header.tsx imports from "@/components", which imports from "./main-intro", which imports from "./MainIntro", which imports from "@/configs" which calls import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc".

You have to stop using these index.ts files that mix server components and client components.

HM. I guess I catch the problem. Header.tsx works with "use client" when I remove from it.
what's wrong with Container.tsx
?

NickVilaribov · 2024-04-03T11:23:05Z

@phryneas You are right, another import solve it.

import { Container } from "@/components/ui";
//import { Container } from "@/components";

phryneas · 2024-04-03T11:23:21Z

Exactly that :)

NickVilaribov · 2024-04-03T11:24:31Z

But why? =) This type of import isn't a mistake, it works, but not in the Next.js.

phryneas · 2024-04-03T11:25:44Z

Your @/components/index.ts file re-exports from files that are both RSC and Client Components. You can never mix them together.

I would really recommend that you never use index.ts files like that to have a "nicer import", because all you do is pull files into your build that shouldn't be there.

phryneas · 2024-04-03T11:27:29Z

A Client Component is never allowed to import from a file that contains a React Server Component, because that "makes it a Client Component". In some cases it's just a bundling error, in some cases it can even pose a security risk.

NickVilaribov · 2024-04-03T12:22:15Z

A Client Component is never allowed to import from a file that contains a React Server Component, because that "makes it a Client Component". In some cases it's just a bundling error, in some cases it can even pose a security risk.

Thanks for your help

github-actions · 2024-04-03T12:22:28Z

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.

phryneas mentioned this issue Apr 3, 2024

NextSSRInMemoryCache is not exported by @apollo/experimental-nextjs-app-support/ssr #262

Open

NickVilaribov closed this as completed Apr 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

registerApolloClient is not a function (Runtime error) #268

registerApolloClient is not a function (Runtime error) #268

NickVilaribov commented Apr 3, 2024 •

edited

Loading

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024 •

edited

Loading

phryneas commented Apr 3, 2024 •

edited

Loading

NickVilaribov commented Apr 3, 2024 •

edited

Loading

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024 •

edited

Loading

phryneas commented Apr 3, 2024 •

edited

Loading

NickVilaribov commented Apr 3, 2024

github-actions bot commented Apr 3, 2024

registerApolloClient is not a function (Runtime error) #268

registerApolloClient is not a function (Runtime error) #268

Comments

NickVilaribov commented Apr 3, 2024 • edited Loading

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024 • edited Loading

phryneas commented Apr 3, 2024 • edited Loading

NickVilaribov commented Apr 3, 2024 • edited Loading

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024

phryneas commented Apr 3, 2024 • edited Loading

phryneas commented Apr 3, 2024 • edited Loading

NickVilaribov commented Apr 3, 2024

github-actions bot commented Apr 3, 2024

NickVilaribov commented Apr 3, 2024 •

edited

Loading

NickVilaribov commented Apr 3, 2024 •

edited

Loading

phryneas commented Apr 3, 2024 •

edited

Loading

NickVilaribov commented Apr 3, 2024 •

edited

Loading

phryneas commented Apr 3, 2024 •

edited

Loading

phryneas commented Apr 3, 2024 •

edited

Loading