= {
);
},
};
+
+export const EcommerceAppWithDefer = () => ;
diff --git a/.storybook/stories/components/TeamLogo.tsx b/.storybook/stories/components/TeamLogo.tsx
new file mode 100644
index 0000000..40d24e5
--- /dev/null
+++ b/.storybook/stories/components/TeamLogo.tsx
@@ -0,0 +1,34 @@
+import Atlanta from "./logos/AtlantaDream.svg?react";
+import Chicago from "./logos/ChicagoSky.svg?react";
+import Connecticut from "./logos/ConnecticutSun.svg?react";
+import Dallas from "./logos/DallasWings.svg?react";
+import Indiana from "./logos/IndianaFever.svg?react";
+import LasVegas from "./logos/LasVegasAces.svg?react";
+import LosAngeles from "./logos/LosAngelesSparks.svg?react";
+import Minnesota from "./logos/MinnesotaLynx.svg?react";
+import NewYork from "./logos/NewYorkLiberty.svg?react";
+import Phoenix from "./logos/PhoenixMercury.svg?react";
+import Seattle from "./logos/SeattleStorm.svg?react";
+import Washington from "./logos/WashingtonMystics.svg?react";
+
+// indexed by team ID
+const logos = [
+ ,
+ NewYork,
+ LasVegas,
+ LosAngeles,
+ Atlanta,
+ Chicago,
+ Connecticut,
+ Indiana,
+ Washington,
+ Dallas,
+ Minnesota,
+ Phoenix,
+ Seattle,
+];
+
+export function TeamLogo({ team }: { team: string }) {
+ const Logo = logos[parseInt(team)] || (() => "Error: no logo found");
+ return ;
+}
diff --git a/.storybook/stories/components/apollo-client/ApolloComponent.tsx b/.storybook/stories/components/apollo-client/EcommerceExample.tsx
similarity index 100%
rename from .storybook/stories/components/apollo-client/ApolloComponent.tsx
rename to .storybook/stories/components/apollo-client/EcommerceExample.tsx
diff --git a/.storybook/stories/components/apollo-client/WNBAExample.tsx b/.storybook/stories/components/apollo-client/WNBAExample.tsx
new file mode 100644
index 0000000..b5368d8
--- /dev/null
+++ b/.storybook/stories/components/apollo-client/WNBAExample.tsx
@@ -0,0 +1,217 @@
+import React, { Suspense, type ReactElement, type ReactNode } from "react";
+import type { TypedDocumentNode } from "@apollo/client";
+import { createClient } from "graphql-ws";
+import { GraphQLWsLink } from "@apollo/client/link/subscriptions";
+import {
+ gql,
+ InMemoryCache,
+ ApolloClient,
+ ApolloProvider,
+ ApolloLink,
+ HttpLink,
+ useSuspenseQuery,
+ useMutation,
+ useFragment,
+} from "@apollo/client";
+
+import { TeamLogo } from "../TeamLogo.js";
+
+const httpLink = new HttpLink({
+ uri: "http://localhost:4000/graphql",
+});
+
+const wsUrl = "ws://localhost:4000/graphql";
+
+const wsLink = new GraphQLWsLink(
+ createClient({
+ url: wsUrl,
+ }),
+);
+
+const definitionIsSubscription = (d: any) => {
+ return d.kind === "OperationDefinition" && d.operation === "subscription";
+};
+
+const link = ApolloLink.split(
+ (operation) => operation.query.definitions.some(definitionIsSubscription),
+ wsLink,
+ httpLink,
+);
+
+export const makeClient = () =>
+ new ApolloClient({
+ cache: new InMemoryCache(),
+ link,
+ connectToDevTools: true,
+ });
+
+export const client = makeClient();
+
+const TEAM_FRAGMENT = gql`
+ fragment TeamFragment on Team {
+ id
+ name
+ wins
+ losses
+ }
+`;
+
+const APP_QUERY: TypedDocumentNode<{
+ team: {
+ id: string;
+ name: string;
+ wins: number;
+ losses: number;
+ };
+ teams: {
+ name: string;
+ id: string;
+ }[];
+}> = gql`
+ query AppQuery {
+ team {
+ ...TeamFragment
+ }
+ teams {
+ name
+ id
+ }
+ }
+
+ ${TEAM_FRAGMENT}
+`;
+
+const APP_MUTATION = gql`
+ mutation SetCurrentTeam($team: ID!) {
+ setCurrentTeam(team: $team) {
+ ...TeamFragment
+ }
+ }
+ ${TEAM_FRAGMENT}
+`;
+
+function Wrapper({ children }: { children: ReactNode }) {
+ return (
+
+ Loading...}>{children}
+
+ );
+}
+
+export function ApolloApp() {
+ return (
+
+
+
+ );
+}
+
+export function App() {
+ // Use useSuspenseQuery here because we want to demo the loading experience
+ // with/without defer.
+ const { data } = useSuspenseQuery(APP_QUERY);
+
+ // this slug of the franchise name is used to set the theme name on the parent
+ // div which corresponds to the theme names in tailwind.config.js
+ const currentTeamSlug = data?.teams
+ .find((team) => team.id === data?.team.id)
+ ?.name.split(" ")
+ .pop()
+ ?.toLowerCase();
+
+ return (
+
+
+
+
+ WNBA stats central
+
+
+
+
+
+
+
+ );
+}
+
+function Team({ team }: { team: string }) {
+ const { data } = useFragment({
+ fragment: TEAM_FRAGMENT,
+ from: {
+ __typename: "Team",
+ id: team,
+ },
+ });
+
+ return (
+
+
+
+
+ {data ? (
+ <>
+
Wins: {data?.wins}
+
Losses: {data?.losses}
+
+ ) : null}
+