Suspense examples (#104)

Author: alessbell

apollo-client/v3/suspense-hooks/package-lock.json

@@ -14,6 +14,8 @@
     "graphql": "16.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-error-boundary": "4.0.10",
+    "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "typescript": "5.1.6",
     "web-vitals": "3.4.0"

apollo-client/v3/suspense-hooks/package.json

@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  margin: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;

apollo-client/v3/suspense-hooks/src/index.css

@@ -1,9 +1,12 @@
 import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import ReactDOM from "react-dom/client";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
-import "./index.css";
-import App from "./App";
 import { link } from "./schema";
+import { Layout } from "./layout";
+import { routes } from "./routes";
+
+import "./index.css";
 
 const client = new ApolloClient({
   cache: new InMemoryCache(),
@@ -13,10 +16,19 @@ const client = new ApolloClient({
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
     <ApolloProvider client={client}>
-      <App />
+      <Router>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            {routes.map(({ path, Element }) => (
+              <Route key={path} path={path} element={<Element />} />
+            ))}
+          </Route>
+        </Routes>
+      </Router>
     </ApolloProvider>
   </React.StrictMode>
 );

apollo-client/v3/suspense-hooks/src/index.tsx

@@ -0,0 +1,47 @@
+import { Outlet, useLocation } from "react-router-dom";
+import { routes } from "./routes";
+import { useMemo } from "react";
+
+export function Layout() {
+  const { pathname } = useLocation();
+  const title = useMemo(
+    () => routes.find((route) => `/${route.path}` === pathname)?.title || "",
+    [pathname]
+  );
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Apollo Client Suspense Hook Examples</h1>
+        <p>
+          This application contains the code samples that appear in{" "}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://www.apollographql.com/docs/react/data/suspense"
+          >
+            Apollo Client's Suspense hooks documentation
+          </a>
+          .
+        </p>
+
+        <nav>
+          <ul>
+            {routes.map(({ path, title }) => (
+              <li key={path}>
+                <a
+                  href={`/${path}`}
+                  dangerouslySetInnerHTML={{ __html: title }}
+                />
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </header>
+      <div className="Grid-column">
+        <h2 dangerouslySetInnerHTML={{ __html: title }} />
+        <Outlet />
+      </div>
+    </div>
+  );
+}

apollo-client/v3/suspense-hooks/src/layout.tsx

@@ -0,0 +1,111 @@
+import { Suspense, useTransition } from "react";
+import {
+  gql,
+  TypedDocumentNode,
+  useBackgroundQuery,
+  useSuspenseQuery,
+  QueryReference,
+  useReadQuery,
+} from "@apollo/client";
+
+interface Data {
+  dog: {
+    id: string;
+    name: string;
+    breed: string;
+  };
+}
+
+interface BreedData {
+  breeds: { id: string; name: string; characteristics: string[] }[];
+}
+
+interface Variables {
+  id: string;
+}
+
+interface DogProps {
+  id: string;
+  isPending: boolean;
+  queryRef: QueryReference<BreedData>;
+  refetchHandler: () => void;
+}
+
+interface BreedsProps {
+  isPending: boolean;
+  queryRef: QueryReference<BreedData>;
+}
+
+export const GET_DOG_QUERY: TypedDocumentNode<Data, Variables> = gql`
+  query GetDog($id: String) {
+    dog(id: $id) {
+      # By default, an object's cache key is a combination of its
+      # __typename and id fields, so we should always make sure the
+      # id is in the response so our data can be normalized and cached properly.
+      id
+      name
+      breed
+    }
+  }
+`;
+
+export const GET_BREEDS_QUERY: TypedDocumentNode<BreedData> = gql`
+  query GetBreeds {
+    breeds {
+      id
+      name
+      characteristics
+    }
+  }
+`;
+
+function App() {
+  const [isPending, startTransition] = useTransition();
+  const [queryRef, { refetch }] = useBackgroundQuery(GET_BREEDS_QUERY);
+
+  const refetchHandler = () => {
+    startTransition(() => {
+      refetch();
+    });
+  };
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Dog
+        id="3"
+        queryRef={queryRef}
+        isPending={isPending}
+        refetchHandler={refetchHandler}
+      />
+    </Suspense>
+  );
+}
+
+function Dog({ id, queryRef, isPending, refetchHandler }: DogProps) {
+  const { data } = useSuspenseQuery(GET_DOG_QUERY, {
+    variables: { id },
+  });
+
+  return (
+    <>
+      Name: {data.dog.name}
+      <Suspense fallback={<div>Loading breeds...</div>}>
+        <Breeds isPending={isPending} queryRef={queryRef} />
+      </Suspense>
+      <button onClick={refetchHandler}>Refetch!</button>
+    </>
+  );
+}
+
+function Breeds({ queryRef, isPending }: BreedsProps) {
+  const { data } = useReadQuery(queryRef);
+  return data.breeds.map(({ characteristics }) =>
+    characteristics.map((characteristic) => (
+      <div style={{ opacity: `${isPending ? 0.5 : 1}` }} key={characteristic}>
+        {characteristic}
+      </div>
+    ))
+  );
+}
+
+export default App;

apollo-client/v3/suspense-hooks/src/refetch-fetchMore.tsx

@@ -0,0 +1,42 @@
+// Pages
+import UseSuspenseQuery from "./useSuspenseQuery";
+import UseSuspenseQueryChangingVariables from "./useSuspenseQuery-changing-variables";
+import UseSuspenseQueryPartialData from "./useSuspenseQuery-partialData";
+import UseSuspenseQueryErrorHandling from "./useSuspsenseQuery-error-handling";
+import UseBackgroundQuery from "./useBackgroundQuery";
+import Refetch from "./refetch-fetchMore";
+
+export const routes = [
+  {
+    path: "useSuspenseQuery",
+    title: "Fetching with <code>useSuspenseQuery</code>",
+    Element: UseSuspenseQuery,
+  },
+  {
+    path: "useSuspenseQuery-changing-variables",
+    title: "<code>useSuspenseQuery</code>: changing variables",
+    Element: UseSuspenseQueryChangingVariables,
+  },
+  {
+    path: "useSuspenseQuery-partial-data",
+    title: "<code>useSuspenseQuery</code>: rendering partial data",
+    Element: UseSuspenseQueryPartialData,
+  },
+  {
+    path: "useSuspenseQuery-error-handling",
+    title: "<code>useSuspenseQuery</code>: error handling",
+    Element: UseSuspenseQueryErrorHandling,
+  },
+  {
+    path: "useBackgroundQuery-useReadQuery",
+    title:
+      "Fetching with <code>useBackgroundQuery</code> and rendering with <code>useReadQuery</code>",
+    Element: UseBackgroundQuery,
+  },
+  {
+    path: "refetch",
+    title:
+      "Refetching with <code>useSuspenseQuery</code> and <code>useBackgroundQuery</code>",
+    Element: Refetch,
+  },
+];