Support codegen types in customerAccount client

.changeset/cool-shoes-shave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+The `customerAccount` client now supports codegen types similar to the `storefront` client.

packages/hydrogen/src/customer/customer.ts

@@ -1,3 +1,8 @@
+import type {
+  ClientReturn,
+  ClientVariablesInRestParams,
+  GenericVariables,
+} from '@shopify/hydrogen-codegen';
 import {
   clearSession,
   generateCodeChallenge,
@@ -46,6 +51,16 @@ type CustomerAPIResponse<ReturnType> = {
   };
 };
 
+export interface CustomerAccountQueries {
+  // Example of how a generated query type looks like:
+  // '#graphql query q1 {...}': {return: Q1Query; variables: Q1QueryVariables};
+}
+
+export interface CustomerAccountMutations {
+  // Example of how a generated mutation type looks like:
+  // '#graphql mutation m1 {...}': {return: M1Mutation; variables: M1MutationVariables};
+}
+
 export type CustomerClient = {
   /** Start the OAuth login flow. This function should be called and returned from a Remix action. It redirects the user to a login domain. */
   login: () => Promise<Response>;
@@ -56,15 +71,35 @@ export type CustomerClient = {
   /** Logout the user by clearing the session and redirecting to the login domain. It should be called and returned from a Remix action. */
   logout: () => Promise<Response>;
   /** Execute a GraphQL query against the Customer Account API. Usually you should first check if the user is logged in before querying the API. */
-  query: <ReturnType = any, RawGqlString extends string = string>(
+  query: <
+    OverrideReturnType extends any = never,
+    RawGqlString extends string = string,
+  >(
     query: RawGqlString,
-    options?: {variables: Record<string, any>},
-  ) => Promise<CustomerAPIResponse<ReturnType>>;
+    ...options: ClientVariablesInRestParams<
+      CustomerAccountQueries,
+      RawGqlString
+    >
+  ) => Promise<
+    CustomerAPIResponse<
+      ClientReturn<CustomerAccountQueries, RawGqlString, OverrideReturnType>
+    >
+  >;
   /** Execute a GraphQL mutation against the Customer Account API. Usually you should first check if the user is logged in before querying the API. */
-  mutate: <ReturnType = any, RawGqlString extends string = string>(
+  mutate: <
+    OverrideReturnType extends any = never,
+    RawGqlString extends string = string,
+  >(
     mutation: RawGqlString,
-    options?: {variables: Record<string, any>},
-  ) => Promise<CustomerAPIResponse<ReturnType>>;
+    ...options: ClientVariablesInRestParams<
+      CustomerAccountMutations,
+      RawGqlString
+    >
+  ) => Promise<
+    CustomerAPIResponse<
+      ClientReturn<CustomerAccountMutations, RawGqlString, OverrideReturnType>
+    >
+  >;
 };
 
 type CustomerClientOptions = {
@@ -133,7 +168,7 @@ export function createCustomerClient({
   }: {
     query: string;
     type: 'query' | 'mutation';
-    variables?: Record<string, any>;
+    variables?: GenericVariables;
   }) {
     const accessToken = session.get('customer_access_token');
     const expiresAt = session.get('expires_at');
@@ -282,13 +317,13 @@ export function createCustomerClient({
 
       return true;
     },
-    mutate(mutation, options) {
+    mutate(mutation, options?) {
       mutation = minifyQuery(mutation);
       assertMutation(mutation, 'customer.mutate');
 
       return fetchCustomerAPI({query: mutation, type: 'mutation', ...options});
     },
-    query(query, options) {
+    query(query, options?) {
       query = minifyQuery(query);
       assertQuery(query, 'customer.query');
 

packages/hydrogen/src/index.ts

@@ -19,7 +19,11 @@ export {type SeoConfig} from './seo/generate-seo-tags';
 export type {SeoHandleFunction} from './seo/seo';
 export {Pagination, getPaginationVariables} from './pagination/Pagination';
 export {createCustomerClient as createCustomerClient__unstable} from './customer/customer';
-export type {CustomerClient} from './customer/customer';
+export type {
+  CustomerClient,
+  CustomerAccountQueries,
+  CustomerAccountMutations,
+} from './customer/customer';
 export {changelogHandler} from './changelogHandler';
 
 export {CartForm, type CartActionInput} from './cart/CartForm';

packages/hydrogen/src/utils/graphql.ts

@@ -1,4 +1,5 @@
 import type {StorefrontApiResponseOk} from '@shopify/hydrogen-react';
+import type {GenericVariables} from '@shopify/hydrogen-codegen';
 
 export function minifyQuery<T extends string>(string: T) {
   return string
@@ -29,7 +30,7 @@ export type GraphQLErrorOptions<T> = {
   errors: GraphQLApiResponse<T>['errors'];
   type: 'query' | 'mutation';
   query: string;
-  queryVariables: Record<string, any>;
+  queryVariables: GenericVariables;
   ErrorConstructor?: ErrorConstructor;
   client?: string;
 };