feat: Add ApolloWrapper as Client Component to fetch GraphQL data wit…

…h using apollo-client.
tabi-memo · Nov 24, 2023 · 6e18235 · 6e18235
1 parent 19bad6b
commit 6e18235
Show file tree

Hide file tree

Showing 6 changed files with 313 additions and 154 deletions.
diff --git a/app/apollo-provider.tsx b/app/apollo-provider.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { HttpLink, ApolloLink } from '@apollo/client'
+import {
+  NextSSRApolloClient,
+  ApolloNextAppProvider,
+  NextSSRInMemoryCache,
+  SSRMultipartLink
+} from '@apollo/experimental-nextjs-app-support/ssr'
+
+function apiEndpoint(): { uri: string; headers?: Record<string, string> } {
+  if (process.env.NODE_ENV === 'development') {
+    return { uri: 'http://127.0.0.1:54321/graphql/v1' }
+  } else {
+    return {
+      uri: process.env.GRAPHQL_ENDPOINT as string,
+      headers: {
+        apiKey: process.env.API_KEY as string
+      }
+    }
+  }
+}
+
+function makeClient() {
+  const httpLink = new HttpLink(apiEndpoint())
+
+  return new NextSSRApolloClient({
+    cache: new NextSSRInMemoryCache(),
+    link:
+      typeof window === 'undefined'
+        ? ApolloLink.from([
+            new SSRMultipartLink({
+              stripDefer: true
+            }),
+            httpLink
+          ])
+        : httpLink
+  })
+}
+
+export function ApolloWrapper({ children }: React.PropsWithChildren) {
+  return (
+    <ApolloNextAppProvider makeClient={makeClient}>
+      {children}
+    </ApolloNextAppProvider>
+  )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Roboto } from 'next/font/google'
 import './globals.css'
+import { ApolloWrapper } from '@/apollo-provider'
 import { Providers } from '@/Providers'
 import type { Metadata } from 'next'
 
@@ -23,7 +24,9 @@ export default function RootLayout({
   return (
     <html lang="en" className={roboto.className}>
       <body>
-        <Providers>{children}</Providers>
+        <ApolloWrapper>
+          <Providers>{children}</Providers>
+        </ApolloWrapper>
       </body>
     </html>
   )

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,59 @@
 'use client'
+
+import { useSuspenseQuery, gql, TypedDocumentNode } from '@apollo/client'
 import { Link } from '@chakra-ui/next-js'
 import { Heading, VStack, Box, useColorMode } from '@chakra-ui/react'
 import { PrimaryButton } from '@/components/button'
+import {
+  TripsCollectionQuery,
+  TripsCollectionQueryVariables
+} from '../graphql-codegen/generated/graphql'
 
 export default function Home() {
   const { colorMode, toggleColorMode } = useColorMode()
 
+  // DEBUG: test graphql query
+  const tripsCollectionQuery: TypedDocumentNode<
+    TripsCollectionQuery,
+    TripsCollectionQueryVariables
+  > = gql`
+    query tripsCollection($user_id: BigInt!) {
+      tripsCollection(filter: { user_id: { eq: $user_id } }) {
+        edges {
+          node {
+            id
+            uuid
+            title
+            date_from
+            date_to
+            invitationsCollection {
+              edges {
+                node {
+                  users {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+            activityCollection {
+              edges {
+                node {
+                  id
+                  title
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `
+  const { data } = useSuspenseQuery(tripsCollectionQuery, {
+    variables: { user_id: 1 }
+  })
+  console.log({ tripData: data.tripsCollection?.edges[0].node })
+
   return (
     <>
       <Heading>Home</Heading>

diff --git a/package.json b/package.json
@@ -15,21 +15,24 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.7",
+    "@apollo/experimental-nextjs-app-support": "^0.5.1",
     "@chakra-ui/next-js": "^2.1.5",
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@graphql-codegen/client-preset": "^4.1.0",
     "framer-motion": "^10.16.4",
+    "graphql": "^16.8.1",
     "next": "14.0.1",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.0.1",
     "@graphql-codegen/cli": "^5.0.0",
-    "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/typescript-react-apollo": "^4.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
+    "@parcel/watcher": "^2.3.0",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
@@ -55,5 +58,8 @@
     "storybook": "^7.5.3",
     "ts-node": "^10.9.1",
     "typescript": "^5"
+  },
+  "peerDependencies": {
+    "@parcel/watcher": "^2.3.0"
   }
 }