@apollo/client@3.8のuseSuspenseQueryでSSRを行う

1import type { AppType } from 'next/app';
2import { useState } from 'react';
3import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
4import { ApolloSSRProvider } from '@react-libraries/apollo-ssr';
5
6const uri = 'https://graphql.anilist.co';
7
8const App: AppType = ({ Component }) => {
9  const [client] = useState(
10    () =>
11      new ApolloClient({
12        uri,
13        cache: new InMemoryCache({}),
14      })
15  );
16  return (
17    <ApolloProvider client={client}>
18      {/* ←Add this */}
19      <ApolloSSRProvider>
20        <Component />
21      </ApolloSSRProvider>
22    </ApolloProvider>
23  );
24};
25
26// getInitialProps itself is not needed, but it is needed to prevent optimization of _app.tsx
27// If you don't include this, it will be executed at build time and will not be called after that.
28App.getInitialProps = () => ({});
29
30export default App;

1import { gql, useApolloClient, useSuspenseQuery } from '@apollo/client';
2import Link from 'next/link';
3import { useRouter } from 'next/router';
4import { Suspense } from 'react';
5
6// Retrieving the animation list
7const QUERY = gql`
8  query Query($page: Int, $perPage: Int) {
9    Page(page: $page, perPage: $perPage) {
10      media {
11        id
12        title {
13          english
14          native
15        }
16      }
17      pageInfo {
18        currentPage
19        hasNextPage
20        lastPage
21        perPage
22        total
23      }
24    }
25  }
26`;
27
28type PageData = {
29  Page: {
30    media: { id: number; siteUrl: string; title: { english: string; native: string } }[];
31    pageInfo: {
32      currentPage: number;
33      hasNextPage: boolean;
34      lastPage: number;
35      perPage: number;
36      total: number;
37    };
38  };
39};
40
41const AnimationList = ({ page }: { page: number }) => {
42  const client = useApolloClient();
43  const { data, refetch } = useSuspenseQuery<PageData>(QUERY, {
44    variables: { page, perPage: 10 },
45  });
46  const { currentPage, lastPage } = data.Page.pageInfo;
47  return (
48    <>
49      <button onClick={() => refetch()}>Refetch</button>
50      <button onClick={() => client.resetStore()}>Reset</button>
51      <div>
52        <Link href={`/?page=${currentPage - 1}`}>
53          <button disabled={currentPage <= 1}>←</button>
54        </Link>
55        <Link href={`/?page=${currentPage + 1}`}>
56          <button disabled={currentPage >= lastPage}>→</button>
57        </Link>
58        {currentPage}/{lastPage}
59      </div>
60      {data.Page.media.map((v) => (
61        <div
62          key={v.id}
63          style={{ border: 'solid 1px', padding: '8px', margin: '8px', borderRadius: '4px' }}
64        >
65          <div>
66            {v.title.english} / {v.title.native}
67          </div>
68          <a href={v.siteUrl}>{v.siteUrl}</a>
69        </div>
70      ))}
71    </>
72  );
73};
74
75const Page = () => {
76  const router = useRouter();
77  const page = Number(router.query.page) || 1;
78
79  return (
80    <Suspense fallback={<div>Loading</div>}>
81      <AnimationList page={page} />
82    </Suspense>
83  );
84};
85
86export default Page;

1import { useApolloClient } from "@apollo/client/index.js";
2import { getSuspenseCache } from "@apollo/client/react/cache/getSuspenseCache.js";
3import { SuspenseCache } from "@apollo/client/react/cache/SuspenseCache.js";
4import { Fragment, ReactNode, createElement, useRef } from "react";
5import type { ApolloClient, ObservableQuery } from "@apollo/client";
6import type { SuspenseCacheOptions } from "@apollo/client/react/cache";
7import type { InternalQueryReference } from "@apollo/client/react/cache/QueryReference";
8import type { CacheKey } from "@apollo/client/react/cache/types";
9
10class SSRCache extends SuspenseCache {
11  constructor(options: SuspenseCacheOptions = Object.create(null)) {
12    super(options);
13  }
14  SuspenseCache() {}
15  getQueryRef<TData = unknown>(
16    cacheKey: CacheKey,
17    createObservable: () => ObservableQuery<TData>,
18  ) {
19    const ref = super.getQueryRef(cacheKey, createObservable);
20    this.refs.add(ref as InternalQueryReference<unknown>);
21    return ref;
22  }
23
24  finished = false;
25  refs = new Set<InternalQueryReference<unknown>>();
26}
27
28const DATA_NAME = "__NEXT_DATA_PROMISE__";
29const suspenseCacheSymbol = Symbol.for("apollo.suspenseCache");
30
31const DataRender = () => {
32  const client = useApolloClient();
33  const cache = getSuspenseCache(client);
34  if (typeof window === "undefined") {
35    if (!(cache instanceof SSRCache)) {
36      throw new Error("SSRCache missing.");
37    }
38    if (!cache.finished) {
39      throw Promise.allSettled(
40        Array.from(cache.refs.values()).map(({ promise }) => promise),
41      ).then((v) => {
42        cache.finished = true;
43        return v;
44      });
45    }
46  }
47  return createElement("script", {
48    id: DATA_NAME,
49    type: "application/json",
50    dangerouslySetInnerHTML: {
51      __html: JSON.stringify(client.extract()).replace(/</g, "\\u003c"),
52    },
53  });
54};
55
56const useApolloCache = <T,>(
57  client: ApolloClient<T> & {
58    [suspenseCacheSymbol]?: SuspenseCache;
59  },
60) => {
61  const property = useRef<{ initialized?: boolean }>({}).current;
62  if (typeof window !== "undefined") {
63    if (!property.initialized) {
64      const node = document.getElementById(DATA_NAME);
65      if (node) client.restore(JSON.parse(node.innerHTML));
66      property.initialized = true;
67    }
68  } else {
69    if (!client[suspenseCacheSymbol]) {
70      client[suspenseCacheSymbol] = new SSRCache(
71        client.defaultOptions.react?.suspense,
72      );
73    }
74  }
75};
76
77export const ApolloSSRProvider = ({ children }: { children: ReactNode }) => {
78  const client = useApolloClient();
79  useApolloCache(client);
80  return createElement(Fragment, {}, children, createElement(DataRender));
81};