Added Boilerplate for Next 13 / Apollo / GraphQL app via apollographq…

…l/apollo-client#10344 (comment).
lukemiller01 · Mar 6, 2023 · bb7bbe7 · bb7bbe7
1 parent 5955d4f
commit bb7bbe7
Show file tree

Hide file tree

Showing 7 changed files with 348 additions and 2 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/app/ApolloClient.ts b/app/ApolloClient.ts
@@ -0,0 +1,32 @@
+import { ApolloClient as BaseApolloClient, InMemoryCache } from "@apollo/client";
+import { ApolloClientOptions } from "@apollo/client/core/ApolloClient";
+
+// Trying to find MVP
+let global:any = {};
+
+try {
+    global = window;
+} catch {
+
+}
+
+class ApolloClient<TCacheShape> extends BaseApolloClient<TCacheShape> {
+    constructor(options: ApolloClientOptions<TCacheShape>) {
+        super(options);
+    }
+
+    public activeQueries: ReturnType<ApolloClient<TCacheShape>["query"]>[] = [];
+
+    query: BaseApolloClient<TCacheShape>["query"] = (options) => {
+        const promise = super.query(options);
+        this.activeQueries.push(promise);
+        return promise;
+    };
+}
+
+export const apolloClient = new ApolloClient({
+    ssrMode: true,
+    uri: "http://localhost:3000/graphql",
+    cache: new InMemoryCache().restore(global.__APOLLO_STATE__),
+    connectToDevTools: true,
+});
diff --git a/app/ApolloExtractCache.tsx b/app/ApolloExtractCache.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { apolloClient } from './ApolloClient'
+
+const ApolloExtractCache = async () => {
+    await Promise.all(apolloClient.activeQueries);
+
+    return (
+        <script
+            dangerouslySetInnerHTML={{
+                __html: `window.__APOLLO_STATE__=${JSON.stringify(
+                    apolloClient.extract()
+                ).replace(/</g, "\\u003c")};`,
+            }}
+        />
+    );
+};
+
+export default ApolloExtractCache;
diff --git a/app/ApolloProviderWrapper.tsx b/app/ApolloProviderWrapper.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { ApolloProvider } from '@apollo/client';
+import { apolloClient } from './ApolloClient';
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,6 @@
-import './globals.css'
+import './globals.css';
+import ApolloExtractCache from "./ApolloExtractCache";
+import Provider from './ApolloProviderWrapper';
 
 export const metadata = {
   title: 'Create Next App',
@@ -12,7 +14,13 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <Provider>
+            {children}
+            {/* @ts-expect-error Server Component */}
+            <ApolloExtractCache />
+        </Provider>
+      </body>
     </html>
   )
 }