Optimizer

swan-io · Mar 23, 2024 · bb61428 · bb61428
1 parent bba5ae6
commit bb61428
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 22 deletions.
diff --git a/example/components/AccountMembership.tsx b/example/components/AccountMembership.tsx
@@ -1,6 +1,8 @@
 import { FragmentOf, readFragment } from "gql.tada";
+import { useState } from "react";
 import { P, match } from "ts-pattern";
 import { graphql } from "../graphql";
+import { AccountMembershipDetail } from "./AccountMembershipDetail";
 
 export const accountMembershipFragment = graphql(`
   fragment AccountMembership on AccountMembership {
@@ -35,27 +37,37 @@ type Props = {
 export const AccountMembership = ({ data }: Props) => {
   const accountMembership = readFragment(accountMembershipFragment, data);
 
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <div className="AccountMembership">
-      <strong>{accountMembership.id}</strong>:
-      {match(accountMembership)
-        .with(
-          { user: { firstName: P.string, lastName: P.string } },
-          ({ user: { firstName, lastName } }) => `${firstName} ${lastName}`,
-        )
-        .with(
-          {
-            statusInfo: {
-              restrictedTo: { firstName: P.string, lastName: P.string },
-            },
-          },
-          ({
-            statusInfo: {
-              restrictedTo: { firstName, lastName },
+    <>
+      <div className="AccountMembership" onClick={() => setIsOpen(true)}>
+        <strong>{accountMembership.id}</strong>:
+        {match(accountMembership)
+          .with(
+            { user: { firstName: P.string, lastName: P.string } },
+            ({ user: { firstName, lastName } }) => `${firstName} ${lastName}`,
+          )
+          .with(
+            {
+              statusInfo: {
+                restrictedTo: { firstName: P.string, lastName: P.string },
+              },
             },
-          }) => `${firstName} ${lastName} (restricted to)`,
-        )
-        .otherwise(() => "No user")}
-    </div>
+            ({
+              statusInfo: {
+                restrictedTo: { firstName, lastName },
+              },
+            }) => `${firstName} ${lastName} (restricted to)`,
+          )
+          .otherwise(() => "No user")}
+      </div>
+      {isOpen ? (
+        <AccountMembershipDetail
+          accountMembershipId={accountMembership.id}
+          onPressClose={() => setIsOpen(false)}
+        />
+      ) : null}
+    </>
   );
 };
diff --git a/example/components/AccountMembershipDetail.tsx b/example/components/AccountMembershipDetail.tsx
@@ -0,0 +1,70 @@
+import { AsyncData, Result } from "@swan-io/boxed";
+import { useState } from "react";
+import { P, match } from "ts-pattern";
+import { ClientError, useQuery } from "../../src";
+import { graphql } from "../graphql";
+import { UserCard } from "./UserCard";
+
+export const accountMembershipDetailQuery = graphql(`
+  query AccountMembershipDetail($accountMembershipId: ID!) {
+    accountMembership(id: $accountMembershipId) {
+      id
+      user {
+        id
+        firstName
+        lastName
+      }
+    }
+  }
+`);
+
+type Props = {
+  accountMembershipId: string;
+  onPressClose: () => void;
+};
+
+export const AccountMembershipDetail = ({
+  accountMembershipId,
+  onPressClose,
+}: Props) => {
+  const [data] = useQuery(
+    accountMembershipDetailQuery,
+    { accountMembershipId },
+    { optimize: true },
+  );
+
+  const [showDetails, setShowDetails] = useState(false);
+
+  return match(data)
+    .with(AsyncData.P.NotAsked, () => "Nothing")
+    .with(AsyncData.P.Loading, () => "Loading")
+    .with(AsyncData.P.Done(Result.P.Error(P.select())), (error) => {
+      ClientError.forEach(error, (error) => console.error(error));
+      return "Error";
+    })
+    .with(
+      AsyncData.P.Done(Result.P.Ok(P.select())),
+      ({ accountMembership }) => {
+        if (accountMembership == null) {
+          return <div>No membership</div>;
+        }
+        return (
+          <dialog open={true}>
+            <button onClick={onPressClose}>Close</button>
+            <div>
+              <strong>Membership: {accountMembership.id}</strong>
+
+              {showDetails ? (
+                <UserCard accountMembershipId={accountMembership.id} />
+              ) : (
+                <button onClick={() => setShowDetails(true)}>
+                  Show user info
+                </button>
+              )}
+            </div>
+          </dialog>
+        );
+      },
+    )
+    .exhaustive();
+};
diff --git a/example/components/UserCard.tsx b/example/components/UserCard.tsx
@@ -0,0 +1,80 @@
+import { AsyncData, Result } from "@swan-io/boxed";
+import { P, match } from "ts-pattern";
+import { ClientError, useQuery } from "../../src";
+import { graphql } from "../graphql";
+
+export const accountMembershipUserDetailQuery = graphql(`
+  query AccountMembershipUserDetail($accountMembershipId: ID!) {
+    accountMembership(id: $accountMembershipId) {
+      id
+      user {
+        id
+        firstName
+        lastName
+        birthDate
+        mobilePhoneNumber
+      }
+    }
+  }
+`);
+
+type Props = {
+  accountMembershipId: string;
+};
+
+const formatter = new Intl.DateTimeFormat();
+
+export const UserCard = ({ accountMembershipId }: Props) => {
+  const [data] = useQuery(
+    accountMembershipUserDetailQuery,
+    {
+      accountMembershipId,
+    },
+    { optimize: true },
+  );
+
+  return match(data)
+    .with(AsyncData.P.NotAsked, () => "Nothing")
+    .with(AsyncData.P.Loading, () => "Loading")
+    .with(AsyncData.P.Done(Result.P.Error(P.select())), (error) => {
+      ClientError.forEach(error, (error) => console.error(error));
+      return "Error";
+    })
+    .with(
+      AsyncData.P.Done(Result.P.Ok(P.select())),
+      ({ accountMembership }) => {
+        if (accountMembership == null) {
+          return null;
+        }
+        const user = accountMembership.user;
+        if (user == null) {
+          return <div>No user</div>;
+        }
+        return (
+          <div className="User">
+            <ul>
+              <li>
+                <strong>ID:</strong> {user.id}
+              </li>
+              <li>
+                <strong>First name:</strong> {user.firstName}
+              </li>
+              <li>
+                <strong>Last name:</strong> {user.lastName}
+              </li>
+              {user.birthDate != null ? (
+                <li>
+                  <strong>Birthdate:</strong>{" "}
+                  {formatter.format(new Date(user.birthDate))}
+                </li>
+              ) : null}
+              <li>
+                <strong>Mobile phone number:</strong> {user.mobilePhoneNumber}
+              </li>
+            </ul>
+          </div>
+        );
+      },
+    )
+    .exhaustive();
+};
diff --git a/example/graphql.ts b/example/graphql.ts
@@ -7,5 +7,7 @@ export const graphql = initGraphQLTada<{
     ID: string;
     Currency: string;
     AmountValue: string;
+    Date: string;
+    PhoneNumber: string;
   };
 }>();
diff --git a/src/client.ts b/src/client.ts
@@ -164,7 +164,7 @@ export class Client {
         variablesAsRecord,
       );
       if (operationResult.isSome()) {
-        return Future.value(operationResult.get());
+        return Future.value(operationResult.get() as Result<Data, ClientError>);
       }
     }
 

diff --git a/src/react/useQuery.ts b/src/react/useQuery.ts
@@ -83,7 +83,7 @@ export const useQuery = <Data, Variables>(
     }
     const request = client.query(stableQuery, stableVariables, { optimize });
     return () => request.cancel();
-  }, [client, suspense, stableQuery, stableVariables]);
+  }, [client, suspense, optimize, stableQuery, stableVariables]);
 
   const [isRefreshing, setIsRefreshing] = useState(false);
   const refresh = useCallback(() => {