vercel · samcx · May 27, 2024 · Apr 26, 2024 · May 3, 2024 · May 3, 2024
@@ -2,8 +2,6 @@
 
 [Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run.
 
-In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser.
-
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

@@ -7,16 +7,17 @@
  "lint": "next lint"
  },
  "dependencies": {
- "@apollo/client": "^3.9.10",
+ "@apollo/client": "^3.10.1",
+ "@apollo/experimental-nextjs-app-support": "^0.10.0",
  "graphql": "^16.8.1",
- "next": "^14.1.4",
- "react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "next": "^14.2.3",
+ "react": "^18.3.0",
+ "react-dom": "^18.3.0"
  },
  "devDependencies": {
  "@types/node": "^20.12.5",
- "@types/react": "^18.2.74",
- "@types/react-dom": "^18.2.24",
+ "@types/react": "^18.3.0",
+ "@types/react-dom": "^18.3.0",
  "typescript": "^5.4.4"
  }
 }
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ApolloClientProvider } from "@/components/ApolloClientProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +17,9 @@ export default function RootLayout({
 }>) {
  return (
  <html lang="en">
- <body className={inter.className}>{children}</body>
+ <body className={inter.className}>
+ <ApolloClientProvider>{children}</ApolloClientProvider>
+ </body>
  </html>
  );
 }
@@ -0,0 +1,3 @@
+export default function Loading() {
+ return <div>Loading...</div>;
+}
@@ -1,9 +1,21 @@
-import { ApolloClientProvider, RepoList } from "@/client-components";
+import { FiveRockets } from "@/components/FiveRocketsClient";
+import { LatestMissionName } from "@/components/LatestMissionName";
+import { Suspense } from "react";
 
 export default async function Home() {
  return (
- <ApolloClientProvider>
- <RepoList />
- </ApolloClientProvider>
+ <>
+ <article>
+ <h2>
+ Latest mission: <LatestMissionName />
+ </h2>
+ </article>
+ <article>
+ <h2>Five Rockets:</h2>
+ <Suspense fallback={<div>loading...</div>}>
+ <FiveRockets />
+ </Suspense>
+ </article>
+ </>
  );
 }
@@ -0,0 +1,46 @@
+"use client";
+
+import { HttpLink } from "@apollo/client";
+import {
+ ApolloNextAppProvider,
+ NextSSRInMemoryCache,
+ NextSSRApolloClient,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+
+function makeClient() {
+ const httpLink = new HttpLink({
+ // See more information about this GraphQL endpoint at https://studio.apollographql.com/public/spacex-l4uc6p/variant/main/home
+ uri: "https://main--spacex-l4uc6p.apollographos.net/graphql",
+ // you can configure the Next.js fetch cache here if you want to
+ fetchOptions: { cache: "force-cache" },
+ // alternatively you can override the default `fetchOptions` on a per query basis
+ // via the `context` property on the options passed as a second argument
+ // to an Apollo Client data fetching hook, e.g.:
+ // ```js
+ // const { data } = useSuspenseQuery(
+ // MY_QUERY,
+ // {
+ // context: {
+ // fetchOptions: {
+ // cache: "no-store"
+ // }
+ // }
+ // }
+ // );
+ // ```
+ });
+
+ return new NextSSRApolloClient({
+ cache: new NextSSRInMemoryCache(),
+ link: httpLink,
+ });
+}
+
+// you need to create a component to wrap your app in
+export function ApolloClientProvider({ children }: React.PropsWithChildren) {
+ return (
+ <ApolloNextAppProvider makeClient={makeClient}>
+ {children}
+ </ApolloNextAppProvider>
+ );
+}
@@ -0,0 +1,39 @@
+"use client";
+
+import { TypedDocumentNode, gql, useSuspenseQuery } from "@apollo/client";
+
+export const getRockets: TypedDocumentNode<
+ {
+ rockets: Array<{
+ id: string;
+ name: string;
+ }>;
+ },
+ {
+ limit: number;
+ }
+> = gql`
+ query GetRockets($limit: Int) {
+ rockets(limit: $limit) {
+ id
+ name
+ }
+ }
+`;
+
+/**
+ * Example Client Component that uses Apollo Client's `useSuspenseQuery` hook for data fetching.
+ */
+export function FiveRockets() {
+ const { data } = useSuspenseQuery(getRockets, {
+ variables: { limit: 5 },
+ });
+
+ return (
+ <ul>
+ {data.rockets.map((rocket) => (
+ <li key={rocket.id}>{rocket.name}</li>
+ ))}
+ </ul>
+ );
+}
@@ -0,0 +1,25 @@
+import { getClient } from "@/lib/ApolloClient";
+import { TypedDocumentNode, gql } from "@apollo/client";
+
+export const getLatestMissionName: TypedDocumentNode<{
+ launchLatest: {
+ mission_name: string;
+ };
+}> = gql`
+ query {
+ launchLatest {
+ mission_name
+ }
+ }
+`;
+
+/**
+ * Example Server Component that uses Apollo Client for data fetching.
+ */
+export async function LatestMissionName() {
+ const { data } = await getClient().query({
+ query: getLatestMissionName,
+ });
+
+ return <div>{data.launchLatest.mission_name}</div>;
+}
@@ -0,0 +1,23 @@
+import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
+
+export const { getClient } = registerApolloClient(() => {
+ return new ApolloClient({
+ cache: new InMemoryCache(),
+ link: new HttpLink({
+ // See more information about this GraphQL endpoint at https://studio.apollographql.com/public/spacex-l4uc6p/variant/main/home
+ uri: "https://main--spacex-l4uc6p.apollographos.net/graphql",
+ // you can configure the Next.js fetch cache here if you want to
+ fetchOptions: { cache: "force-cache" },
+ // alternatively you can override the default `fetchOptions` on a per query basis
+ // ```js
+ // const result = await getClient().query({
+ // query: MY_QUERY,
+ // context: {
+ // fetchOptions: { cache: "force-cache" },
+ // },
+ // });
+ // ```
+ }),
+ });
+});