Add a Customer Account API Abstraction (#1430)

.changeset/chatty-parrots-care.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Add a client for query the new Customer Account API

examples/customer-api/app/routes/_index.tsx

@@ -3,20 +3,37 @@ import {type LoaderFunctionArgs, json} from '@shopify/remix-oxygen';
 
 export async function loader({context}: LoaderFunctionArgs) {
   if (await context.customer.isLoggedIn()) {
-    const user = await context.customer.query(`
-      {
+    const {customer} = await context.customer.query<{
+      customer: {firstName: string; lastName: string};
+    }>(`#graphql
+      query getCustomer {
         customer {
           firstName
           lastName
         }
       }
       `);
 
-    return json({
-      user,
-    });
+    return json(
+      {
+        customer,
+      },
+      {
+        headers: {
+          'Set-Cookie': await context.session.commit(),
+        },
+      },
+    );
   }
-  return json({user: null});
+
+  return json(
+    {customer: null},
+    {
+      headers: {
+        'Set-Cookie': await context.session.commit(),
+      },
+    },
+  );
 }
 
 export function ErrorBoundary() {
@@ -36,15 +53,15 @@ export function ErrorBoundary() {
 }
 
 export default function () {
-  const {user} = useLoaderData() as any;
+  const {customer} = useLoaderData<typeof loader>();
 
   return (
     <div style={{marginTop: 24}}>
-      {user ? (
+      {customer ? (
         <>
           <div style={{marginBottom: 24}}>
             <b>
-              Welcome {user.customer.firstName} {user.customer.lastName}
+              Welcome {customer.firstName} {customer.lastName}
             </b>
           </div>
           <div>
@@ -54,7 +71,7 @@ export default function () {
           </div>
         </>
       ) : null}
-      {!user ? (
+      {!customer ? (
         <Form method="post" action="/authorize">
           <button>Login</button>
         </Form>