feat: add useLoadableQuery example (#124)

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

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "3.8.0",
+    "@apollo/client": "^3.9.0-rc.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",

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

@@ -2,9 +2,9 @@
 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";
+import useLoadableQuery from "./useLoadableQuery";
 
 export const routes = [
   {
@@ -22,11 +22,6 @@ export const routes = [
     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:
@@ -39,4 +34,10 @@ export const routes = [
       "Refetching with <code>useSuspenseQuery</code> and <code>useBackgroundQuery</code>",
     Element: Refetch,
   },
+  {
+    path: "useLoadableQuery",
+    title:
+      "Fetching data on user interaction with <code>useLoadableQuery</code>",
+    Element: useLoadableQuery,
+  },
 ];

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

@@ -27,7 +27,6 @@ interface Variables {
 interface DogProps {
   id: string;
   queryRef: QueryReference<BreedData>;
-  // dogQueryRef: QueryReference<DogData>;
 }
 
 interface BreedsProps {

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

@@ -0,0 +1,88 @@
+import { Suspense } from "react";
+import {
+  gql,
+  QueryReference,
+  TypedDocumentNode,
+  useLoadableQuery,
+  useReadQuery,
+  useSuspenseQuery,
+} from "@apollo/client";
+
+interface DogsData {
+  dogs: {
+    id: string;
+    name: string;
+  }[];
+}
+
+interface DogData {
+  dog: {
+    id: string;
+    name: string;
+    breed: string;
+  };
+}
+
+interface Variables {
+  id: string;
+}
+
+export const GET_DOG_QUERY: TypedDocumentNode<DogData, 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_DOGS_QUERY: TypedDocumentNode<DogsData, Variables> = gql`
+  query GetDogs {
+    dogs {
+      id
+      name
+      breed
+    }
+  }
+`;
+
+function App() {
+  const { data } = useSuspenseQuery(GET_DOGS_QUERY);
+  const [loadDog, queryRef] = useLoadableQuery(GET_DOG_QUERY);
+
+  return (
+    <>
+      <select onChange={(e) => loadDog({ id: e.target.value })}>
+        {data.dogs.map(({ id, name }) => (
+          <option key={id} value={id}>
+            {name}
+          </option>
+        ))}
+      </select>
+      <Suspense fallback={<div>Loading...</div>}>
+        {queryRef && <Dog queryRef={queryRef} />}
+      </Suspense>
+    </>
+  );
+}
+
+interface DogProps {
+  queryRef: QueryReference<DogData>;
+}
+
+function Dog({ queryRef }: DogProps) {
+  const { data } = useReadQuery(queryRef);
+
+  return (
+    <>
+      <div>Name: {data.dog.name}</div>
+      <div>Breed: {data.dog.breed}</div>
+    </>
+  );
+}
+
+export default App;

apollo-client/v3/suspense-hooks/src/useSuspenseQuery-changing-variables.tsx

@@ -32,6 +32,7 @@ export const GET_DOG_QUERY: TypedDocumentNode<DogData, Variables> = gql`
       # id is in the response so our data can be normalized and cached properly.
       id
       name
+      breed
     }
   }
 `;
@@ -41,6 +42,7 @@ export const GET_DOGS_QUERY: TypedDocumentNode<DogsData, Variables> = gql`
     dogs {
       id
       name
+      breed
     }
   }
 `;