From bb7bbe78ff5b394225d6470d98546f87e038a211 Mon Sep 17 00:00:00 2001 From: Luke Miller Date: Sun, 5 Mar 2023 23:34:30 -0500 Subject: [PATCH] Added Boilerplate for Next 13 / Apollo / GraphQL app via https://github.com/apollographql/apollo-client/issues/10344#issuecomment-1439992233. --- .vscode/settings.json | 4 + app/ApolloClient.ts | 32 ++++ app/ApolloExtractCache.tsx | 18 +++ app/ApolloProviderWrapper.tsx | 8 + app/layout.tsx | 12 +- package-lock.json | 274 ++++++++++++++++++++++++++++++++++ package.json | 2 + 7 files changed, 348 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 app/ApolloClient.ts create mode 100644 app/ApolloExtractCache.tsx create mode 100644 app/ApolloProviderWrapper.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d067910 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true +} \ No newline at end of file diff --git a/app/ApolloClient.ts b/app/ApolloClient.ts new file mode 100644 index 0000000..e40460e --- /dev/null +++ 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 extends BaseApolloClient { + constructor(options: ApolloClientOptions) { + super(options); + } + + public activeQueries: ReturnType["query"]>[] = []; + + query: BaseApolloClient["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, +}); \ No newline at end of file diff --git a/app/ApolloExtractCache.tsx b/app/ApolloExtractCache.tsx new file mode 100644 index 0000000..e5e3ca6 --- /dev/null +++ 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 ( +