Next JS 13 (AppDir and RSC) with ApolloClient

[lloydrichards]

Intended outcome:
After moving my app from the pages layout to the new app directory, I should be able to make simple queries to my GraphQL endpoint using apollo-client and graphql-codegen

Actual outcome:
With the new NextJS 13 server rendered components, its no longer possible to provide the apollo context at the root of the app and then useQuery() to fetch the data.

How to reproduce the issue:
I initially tried to match up the pageProps that I was using in the previous version:

config/apolloClient.ts

export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";

let apolloClient: ApolloClient<NormalizedCacheObject> | null = null;

type SchemaContext =
  | SchemaLink.ResolverContext
  | SchemaLink.ResolverContextFunction;

function createIsomorphicLink(_?: SchemaContext) {
  const httpLink = new HttpLink({
    uri: `${
      process.env.NODE_ENV == "production"
        ? process.env.GRAPHQL_URL_PROD
        : "http://localhost:5001/life-hive/us-central1/graphql"
    }`,
    credentials: "same-origin",
  });
  return from([httpLink]);
}

function createApolloClient(ctx?: SchemaContext) {
  return new ApolloClient({
    name: "life-hive-dashboard",
    ssrMode: typeof window === "undefined",
    link: createIsomorphicLink(ctx || undefined),
    cache: new InMemoryCache({
      typePolicies: {
        Customer: { keyFields: ["customer_id"] },
        ApiaryDevice: { keyFields: ["device_id"] },
        HiveDevice: { keyFields: ["device_id"] },
        CombDevice: { keyFields: ["comb_id"] },
        Treatment: { keyFields: ["treatment_id", "device_id"] },
        DeviceEvent: { keyFields: ["event_id"] },
        CombState: { keyFields: ["id"] },
        DeviceState: { keyFields: ["id"] },
        Failure: { keyFields: ["failure_id"] },
        Query: {
          fields: {
            getGlobalIDs: relayStylePagination(),
          },
        },
      },
    }),
  });
}

interface InitApollo {
  initialState?: any;
  ctx?: SchemaContext;
}

export function initializeApollo({ ctx, initialState }: InitApollo) {
  const _apolloClient = apolloClient ?? createApolloClient(ctx || undefined);

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // gets hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();

    // Merge the initialState from getStaticProps/getServerSideProps in the existing cache
    const data = merge(existingCache, initialState, {
      // combine arrays using object equality (like in sets)
      arrayMerge: (destinationArray, sourceArray) => [
        ...sourceArray,
        ...destinationArray.filter((d) =>
          sourceArray.every((s) => !isEqual(d, s)),
        ),
      ],
    });

    // Restore the cache with the merged data
    _apolloClient.cache.restore(data);
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === "undefined") return _apolloClient;
  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient;

  return _apolloClient;
}

export function addApolloState(
  client: ApolloClient<NormalizedCacheObject>,
  pageProps: { props: any },
) {
  pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();

  return pageProps;
}

export function useApollo(pageProps: any) {
  const state = pageProps[APOLLO_STATE_PROP_NAME];
  const store = useMemo(
    () => initializeApollo({ initialState: state }),
    [state],
  );
  return store;
}

pages/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const apolloClient = useApollo(pageProps);
  return (
    <ApolloProvider client={apolloClient}>
          <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

With the new Next13 AppDir they suggest creating a provider.tsx which is rendered client side and used to wrap the children in the layout.tsx as stated in their docs, but since i'm adding the apollo state to the app in my useApollo() this doesn't work.

So i've tried to make a simplier version by following some other blog posts on using Next and Apollo to initialize the client and then try useQuery() in a RSC:

config/apollo_config.ts

function createApolloClient() {
  return new ApolloClient({
    name: 'internal-dashboard',
    uri: process.env.GRAPHQL_URL_PROD,
    cache: new InMemoryCache(),
  });
}

export function useApollo() {
  const client = useMemo(() => createApolloClient(), []);
  return client;
}

app/providers.tsx

'use client';

import { ApolloProvider } from '@apollo/client';
import { useApollo } from '../config/apollo_client';

export default function Provider({ children }: { children: React.ReactNode }) {
  const client = useApollo();
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

When running on a server rendered component i get the following error:

TypeError: Cannot read properties of undefined (reading 'Symbol(__APOLLO_CONTEXT__)')
    at Object.getApolloContext (webpack-internal:///(sc_server)/./node_modules/@apollo/client/react/context/context.cjs:22:49)
    at useApolloClient (webpack-internal:///(sc_server)/./node_modules/@apollo/client/react/hooks/hooks.cjs:27:46)
    at Object.useQuery (webpack-internal:///(sc_server)/./node_modules/@apollo/client/react/hooks/hooks.cjs:100:29)
    at useProductsQuery (webpack-internal:///(sc_server)/./graphql/generated/graphql-codegen.tsx:239:56)
    at ProductContent (webpack-internal:///(sc_server)/./app/(product)/ProductContent.tsx:12:125)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1207:42)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:53)
    at Object.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1121:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:172:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1868:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1906:33)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1297:40)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1296:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1309:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

and if i run it on a client rendered component i get:

fetch is not defined
    at new ApolloError (index.js?2dcd:29:1)
    at eval (QueryManager.js?f2a8:609:1)
    at both (asyncMap.js?acdc:16:46)
    at eval (asyncMap.js?acdc:9:57)
    at new Promise (<anonymous>)
    at Object.then (asyncMap.js?acdc:9:1)
    at Object.eval [as next] (asyncMap.js?acdc:17:1)
    at notifySubscription (module.js?4392:132:1)
    at onNotify (module.js?4392:176:1)
    at SubscriptionObserver.next (module.js?4392:225:1)
    at eval (iteration.js?8787:4:50)
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (iteration.js?8787:4:1)
    at Object.next (Concast.js?c3b3:25:43)
    at notifySubscription (module.js?4392:132:1)
    at onNotify (module.js?4392:176:1)
    at SubscriptionObserver.next (module.js?4392:225:1)
    at eval (parseAndCheckHttpResponse.js?5a22:123:1)

At this point i'm just kind walking around in the dark as i can't really wrap my head around what needs to be happening in order for the app to work with client rendered and server rendered components and where apollo client fits in to get my graphql data that i need.

Any suggestions or links to working examples for someone using Next JS 13 + AppDir + ApolloClient would be much appreciated!

Versions

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 18.10.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - D:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (108.0.1462.42)
  npmPackages:
    @apollo/client: ^3.7.2 => 3.7.2

[bignimbus]

Hi @lloydrichards, thanks for posting this Issue! The team is really interested in RSC and, as you note, there are some changes that will need to be made in order to make Apollo Client and Next.js 13 work together out of the box. We're working on supporting React 18 features like Suspense and renderToPipeableStream for the 3.8 release (see #10231) and the first alpha should ship soon. After learning from those implementations we'll be able to move with more confidence toward an understanding of how to support developers who are using Server Components. If anyone finds this thread and wants to share tips, please do!

[lloydrichards]

glad to hear things will be moving in the future, and will just have to wait on using ApolloClient for the time being. I did some experimenting and managed to get things working first with fetch() and then with graphql-request. part of debugging was creating a minimal repo for it, which is now fixed and might be useful for others:

https://github.com/lloydrichards/reproduced-fetch-error

but most of the credit for getting working goes to https://github.com/graphqlwtf I'll keep my eyes open for any future development in ApolloClient and wish you luck!

[jpvajda]

@lloydrichards thanks for letting us know about the challenges here. You can follow along with some upcoming Alpha releases we have planned to better support React 18 Suspense and SSR (see our Roadmap for more details) Hopefully once this is better supported you can give Apollo Client a try again.

[partounian]

hey all,

I'm using NextJs 13.0.6, and Apollo Client 3.7.2. The issue could be specific to using a credentials (email/password) provider with Nextauth.js, but it seems like whenever I try to perform an apollo query on the server side, I get an error. "[Network error]: TypeError: fetch failed".

The same code seems work fine on the client side.

Any chance y'all have a guess as whether this is a bug/incompability between these libraries or if I'm doing something wrong? Not sure if the nextjs override for fetch() could be the cause of this issue

If it's any help, I am mostly following https://github.com/shadcn/taxonomy which is the only solid Nextjs 13 example I'm found.

[partounian]

Maybe I'm doing something wrong, but seems like this fixed my issue #10310 (comment)
(using cross-fetch instead of fetch for @apollo/client http links)

[msikma]

I'm curious if there's any information yet about what the recommended interface will look like for using Apollo with Next 13.

For example, this blog post for Next 12 talks about using the old getStaticProps() and getServerSideProps() api that is not supported in the /app dir.

I realize this is all very new and I probably should not be using the /app dir yet if I want to use Apollo, but some thoughts on this would be appreciated since as far as I can tell there's no real documentation on this yet.

[lloydrichards]

I did get it working with Apollo client but it invoked doing some weird things with wrapping the layout.tsx in a provider.tsx that lead flagged with "use client" and then whenever Apollo queries were called also using the same flag. This really missed the point of using the app dir for me so I ended up using `grapwhl-request` instead of Apollo client and everything works using just the app dir and RSC

…

On Tue, 20 Dec 2022, 19:17 Michiel Sikma, ***@***.***> wrote: I'm curious if there's any information yet about what the recommended interface will look like for using Apollo with Next 13. For example, this blog post <https://www.apollographql.com/blog/apollo-client/next-js/next-js-getting-started/> for Next 12 talks about using the old getStaticProps() and getServerSideProps() api that is not supported in the /app dir. I realize this is all very new and I probably should not be using the /app dir yet if I want to use Apollo, but some thoughts on this would be appreciated since as far as I can tell there's no real documentation on this yet. — Reply to this email directly, view it on GitHub <#10344 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHWIQKON2NDZXGBHC2QTJTWOHZ45ANCNFSM6AAAAAASZL4AY4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[antizhyk]

Hi all , has anyone been able to use NextJS 13 and Apollo Client yet? I'm starting a new project and really want to do it on NextJS 13, but I need tools to work with GraphQL.

[lloydrichards]

you can still use Apollo Client, but you'll end up with everything in the app directory being a client component. If that's okay with you then all you need to do is wrap children in the layout.tsx in the ApolloProvider, the same way you would in _app.tsx. I think with the new Typescript plug it it should automatically detect that everything is a client component so you don't need to use `use client` but you'll have to avoid any of the getServerSideProps patterns that you would use in Pages. Or just use Next 13, but in the pages dir. that all still works fine

…

On Thu, Jan 12, 2023 at 6:43 PM Aleksandr ***@***.***> wrote: Hi all , has anyone been able to use NextJS 13 and Apollo Client yet? I'm starting a new project and really want to do it on NextJS 13, but I need tools to work with GraphQL. — Reply to this email directly, view it on GitHub <#10344 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOHWIQIFU2NAYVDH4OZBLT3WSA7ENANCNFSM6AAAAAASZL4AY4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Lloyd Richards *Data Visualization Designer* +41 7797 30938 www.lloydrichardsdesign.com

[antizhyk]

But then NextJS will work like regular React, right? And for my project SEO is very important.

you can still use Apollo Client, but you'll end up with everything in the app directory being a client component. If that's okay with you then all you need to do is wrap children in the layout.tsx in the ApolloProvider, the same way you would in _app.tsx. I think with the new Typescript plug it it should automatically detect that everything is a client component so you don't need to use use client but you'll have to avoid any of the getServerSideProps patterns that you would use in Pages.

[adamfortuna]

Hi all , has anyone been able to use NextJS 13 and Apollo Client yet? I'm starting a new project and really want to do it on NextJS 13, but I need tools to work with GraphQL.

It is possible to make calls from the server side. I've been using the same setup for app as previously in pages for the server-side part. Here's an example from a project I'm working on.

I've found this way works for hitting a GraphQL API directly, but it doesn't do server-side caching, so it makes requests each time (I think). In my case I need to make this call in head.tsx and in page.tsx, so the call gets made twice. 😅 If anyone knows how to cache this call, I'd welcome feedback. :)

@/app/[slug]/page.tsx

import { getPostBySlug } from '@/queries/wordpress/getPostBySlug'
import { ArticleContentHtml } from '@/components/articles/ArticleContent'
import { ArticleHeader } from '@/components/articles/ArticleHeader'

interface PageProps {
  params: any
  children?: React.ReactNode
}
export const revalidate = 60 * 60 // 60 minutes
export default async function Page({ params }: PageProps) {
  const article = await getPostBySlug(params.slug)
  if (!article) return null

  return (
    <>
      <ArticleHeader article={article} />
      <ArticleContentHtml article={article} />
    </>
  )
}

@/queries/wordpress/getPostBySlug'

import wordpressClient, { parsePost } from '@/lib/wordpressClient'
import { gql } from '@apollo/client'

export const findWordpressPost = gql`
query GetWordPressPost($slug: String!) {
  post: postBy(slug: $slug) {
    title
  }
}
`

export const getPostBySlug = (slug: string) => {
  return wordpressClient
    .query({
      query: findWordpressPost,
      variables: {
        slug,
      },
    })
    .then((result) => {
      if (!result.data.post) {
        return null
      }
      return parsePost(result.data.post)
    })
}

@/lib/wordpressClient

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
import { setContext } from '@apollo/client/link/context'

const clientHttpLink = createHttpLink({
  uri: 'https://wp.adamfortuna.com/graphql',
})
const clientAuthLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: `Basic ${process.env.WP_ADAMFORTUNA_TOKEN}`,
    },
  }
})
const client = new ApolloClient({
  link: clientAuthLink.concat(clientHttpLink),
  cache: new InMemoryCache(),
})
export default client

This is pretty basic, but it allows for using GraphQL with Apollo, with an authenticated API. I'm still working on having Next.js 13 cache the network call from getPostBySlug though. If anyone has any tips on that I'd love to hear them.

[baxterw3b]

@adamfortuna Hey Adams, that's what i'm doing too, but for me the revalidate doesn't work after build, does it for you? For the cache, did you try with the defaultOptions? :

const client = new ApolloClient({
  uri: `http://localhost:3000/api/graphql`,
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
      errorPolicy: "none",
    },
    query: {
      fetchPolicy: "network-only",
      errorPolicy: "all",
    },
  },
});