Add storybook docs (#28)

.changeset/strong-llamas-wash.md

@@ -0,0 +1,5 @@
+---
+"@apollo/graphql-testing-library": minor
+---
+
+Defer support

.storybook/main.ts

@@ -7,9 +7,9 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
     "@storybook/addon-interactions",
     "@storybook/addon-styling-webpack",
+    "@storybook/addon-docs",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/stories/Apollo.mdx

@@ -0,0 +1,46 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as ApolloStories from './Apollo.stories.ts';
+
+<Meta of={ApolloStories} />
+
+# Apollo Demo
+
+The `Apollo/App` and `Apollo/AppWithDefer` stories provide two examples of a MSW handler generated by this library resolving a request originating from a Relay app.
+
+## `App` query
+In `App`, a single JSON response is generated using the mock resolver found in [`src/__tests__/mocks/handlers.ts`](https://github.com/apollographql/graphql-testing-library/blob/main/src/__tests__/mocks/handlers.ts).
+
+<Source language="graphql" code={`
+query AppQuery {
+  products {
+    id
+    reviews {
+      id
+      rating
+    }
+    title
+    mediaUrl
+  }
+}
+`} />
+
+## `AppWithDefer` query
+In `AppWithDefer`, the same mock resolver is used to generate the response, but the presence of `@defer` prompts the generated MSW handler to reply with a multipart response using the proposed [incremental delivery over HTTP](https://github.com/graphql/graphql-over-http/blob/main/rfcs/IncrementalDelivery.md) specification. While the inline fragment is pending, the `Reviews` component displays a `-` in place of the missing data.
+
+<Source language="graphql" code={`
+query AppQueryWithDefer {
+  products {
+    id
+    ... @defer {
+      reviews {
+        id
+        rating
+      }
+    }
+    title
+    mediaUrl
+  }
+}
+`} />
+
+{/* <Canvas of={ApolloStories.AppWithDefer} /> */}

.storybook/stories/ApolloComponent.stories.ts → .storybook/stories/Apollo.stories.ts

@@ -4,15 +4,15 @@ import {
   ApolloApp,
   ApolloAppWithDefer as AppWithDefer,
 } from "./components/apollo-client/ApolloComponent.js";
-import { createHandler } from "../../src/handlers";
-import { schemaWithMocks } from "../../src/__tests__/mocks/handlers";
-import { Canvas } from "@storybook/blocks";
+import { createHandler } from "../../src/handlers.js";
+import { schemaWithMocks } from "../../src/__tests__/mocks/handlers.js";
 
 const { handler } = createHandler(schemaWithMocks);
 
 const meta = {
   title: "Example/Apollo",
   component: ApolloApp,
+  // tags: ["autodocs"],
   parameters: {
     layout: "centered",
     msw: {

.storybook/stories/Relay.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as RelayStories from './Relay.stories.ts';
+
+<Meta of={RelayStories} />
+
+# Relay Demo
+
+The `Relay/App` and `Relay/AppWithDefer` stories provide two examples of a MSW handler generated by this library resolving a request originating from a Relay app.
+
+## `App` query
+In `App`, a single JSON response is generated using the mock resolver found in [`src/__tests__/mocks/handlers.ts`](https://github.com/apollographql/graphql-testing-library/blob/main/src/__tests__/mocks/handlers.ts).
+
+<Source language="graphql" code={`
+query RelayComponentWithDeferAppQuery {
+  products {
+    id
+    ...RelayComponentReviewsFragment_product
+    title
+    mediaUrl
+    description
+  }
+}
+`} />
+
+## `AppWithDefer` query
+In `AppWithDefer`, the same mock resolver is used to generate the response, but the presence of `@defer` prompts the generated MSW handler to reply with a multipart response using the proposed [incremental delivery over HTTP](https://github.com/graphql/graphql-over-http/blob/main/rfcs/IncrementalDelivery.md) specification. While the `RelayComponentReviewsFragment_product` fragment is suspending, the `Reviews` component displays a `-` fallback.
+
+<Source language="graphql" code={`
+query RelayComponentWithDeferAppQuery {
+  products {
+    id
+    ...RelayComponentReviewsFragment_product @defer
+    title
+    mediaUrl
+    description
+  }
+}
+`} />
+
+{/* <Canvas of={RelayStories.AppWithDefer} /> */}

.storybook/stories/RelayComponent.stories.ts → .storybook/stories/Relay.stories.ts

@@ -4,14 +4,15 @@ import {
   RelayApp,
   RelayAppWithDefer as AppWithDefer,
 } from "./components/relay/RelayComponent.js";
-import { createHandler } from "../../src/handlers";
-import { schemaWithMocks } from "../../src/__tests__/mocks/handlers";
+import { createHandler } from "../../src/handlers.js";
+import { schemaWithMocks } from "../../src/__tests__/mocks/handlers.js";
 
 const { handler } = createHandler(schemaWithMocks);
 
 const meta = {
   title: "Example/Relay",
   component: RelayApp,
+  // tags: ["autodocs"],
   parameters: {
     layout: "centered",
     msw: {

.storybook/stories/components/Container.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 function Container({ children }: { children: ReactNode }) {
   return (
     <div className="bg-white">
-      <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-2xl px-4 py-4 sm:px-6 lg:max-w-7xl lg:px-8">
         <h2 className="text-2xl font-bold tracking-tight text-gray-900">
           Customers also purchased
         </h2>

.storybook/stories/components/Product.tsx

@@ -3,7 +3,6 @@ import type { ReactNode } from "react";
 type Product = {
   id: string;
   mediaUrl: string | null | undefined;
-  description: string | null | undefined;
   title: string | null | undefined;
 };
 
@@ -19,7 +18,6 @@ function Product({
       <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
         <img
           src={product.mediaUrl || ""}
-          alt={product.description || ""}
           className="h-full w-full object-cover object-center lg:h-full lg:w-full"
         />
       </div>
@@ -38,7 +36,7 @@ function Product({
   );
 }
 
-type ReviewType = { rating: number; id: string; content: string };
+type ReviewType = { rating: number; id: string };
 
 function Reviews({ reviews }: { reviews: Array<ReviewType> }) {
   return reviews?.length > 0

.storybook/stories/components/apollo-client/ApolloComponent.tsx

@@ -30,8 +30,7 @@ const APP_QUERY: TypedDocumentNode<{
     id: string;
     title: string;
     mediaUrl: string;
-    description: string;
-    reviews: Array<{ rating: number; id: string; content: string }>;
+    reviews: Array<{ rating: number; id: string }>;
   }[];
 }> = gql`
   query AppQuery {
@@ -40,11 +39,9 @@ const APP_QUERY: TypedDocumentNode<{
       reviews {
         id
         rating
-        content
       }
       title
       mediaUrl
-      description
     }
   }
 `;
@@ -54,23 +51,20 @@ const APP_QUERY_WITH_DEFER: TypedDocumentNode<{
     id: string;
     title: string;
     mediaUrl: string;
-    description: string;
-    reviews?: Array<{ rating: number; id: string; content: string }>;
+    reviews?: Array<{ rating: number; id: string }>;
   }[];
 }> = gql`
-  query AppQuery {
+  query AppQueryWithDefer {
     products {
       id
       ... @defer {
         reviews {
           id
           rating
-          content
         }
       }
       title
       mediaUrl
-      description
     }
   }
 `;

.storybook/stories/components/relay/RelayComponent.tsx

@@ -23,7 +23,6 @@ const ratingsFragment = graphql`
     reviews {
       id
       rating
-      content
     }
   }
 `;
@@ -35,7 +34,6 @@ const appQuery = graphql`
       ...RelayComponentReviewsFragment_product
       title
       mediaUrl
-      description
     }
   }
 `;
@@ -47,7 +45,6 @@ const appQueryWithDefer = graphql`
       ...RelayComponentReviewsFragment_product @defer
       title
       mediaUrl
-      description
     }
   }
 `;