renamed type CustomerClient

.changeset/rude-waves-fetch.md

@@ -0,0 +1,7 @@
+---
+'skeleton': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+---
+
+♻️ `CustomerClient` type is deprecated and replaced by `CustomerAccount`

examples/third-party-queries-caching/remix.env.d.ts

@@ -5,7 +5,11 @@
 // Enhance TypeScript's built-in typings.
 import '@total-typescript/ts-reset';
 
-import type {Storefront, CustomerClient, HydrogenCart} from '@shopify/hydrogen';
+import type {
+  Storefront,
+  CustomerAccount,
+  HydrogenCart,
+} from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 import {createRickAndMortyClient} from './app/lib/createRickAndMortyClient.server';
 
@@ -37,7 +41,7 @@ declare module '@shopify/remix-oxygen' {
     env: Env;
     cart: HydrogenCart;
     storefront: Storefront;
-    customerAccount: CustomerClient;
+    customerAccount: CustomerAccount;
     rickAndMorty: ReturnType<typeof createRickAndMortyClient>;
     session: AppSession;
     waitUntil: ExecutionContext['waitUntil'];

packages/cli/src/lib/setups/i18n/replacers.test.ts

@@ -61,7 +61,7 @@ describe('i18n replacers', () => {
 
         import type {
           Storefront,
-          CustomerClient,
+          CustomerAccount,
           HydrogenCart,
         } from "@shopify/hydrogen";
         import type {
@@ -103,7 +103,7 @@ describe('i18n replacers', () => {
             env: Env;
             cart: HydrogenCart;
             storefront: Storefront<I18nLocale>;
-            customerAccount: CustomerClient;
+            customerAccount: CustomerAccount;
             session: AppSession;
             waitUntil: ExecutionContext["waitUntil"];
           }

packages/hydrogen/src/customer/customer.doc.ts

@@ -35,12 +35,12 @@ The \`createCustomerAccountClient\` function creates a GraphQL client for queryi
   definitions: [
     {
       title: 'createCustomerAccountClient(options)',
-      type: 'CustomerClientOptions',
+      type: 'CustomerAccountOptions',
       description: '',
     },
     {
       title: 'Returns',
-      type: 'CustomerClientForDocs',
+      type: 'CustomerAccountForDocs',
       description: '',
     },
   ],

packages/hydrogen/src/customer/customer.example.tsx

@@ -1,4 +1,3 @@
-import type {CustomerClient} from '@shopify/hydrogen';
 import {
   createCustomerAccountClient,
   type HydrogenSession,

packages/hydrogen/src/customer/customer.opt-out-handler.example.tsx

@@ -1,4 +1,4 @@
-import type {CustomerClient} from '@shopify/hydrogen';
+import type {CustomerAccount} from '@shopify/hydrogen';
 import {type HydrogenSession} from '@shopify/hydrogen';
 import {
   createCookieSessionStorage,
@@ -18,7 +18,7 @@ declare module '@shopify/remix-oxygen' {
    * Declare local additions to the Remix loader context.
    */
   export interface AppLoadContext {
-    customerAccount: CustomerClient;
+    customerAccount: CustomerAccount;
     session: AppSession;
   }
 }

packages/hydrogen/src/customer/customer.ts

@@ -38,7 +38,7 @@ import {
   type StackInfo,
 } from '../utils/callsites';
 import {getRedirectUrl} from '../utils/get-redirect-url';
-import type {CustomerClientOptions, CustomerClient} from './types';
+import type {CustomerAccountOptions, CustomerAccount} from './types';
 
 const DEFAULT_LOGIN_URL = '/account/login';
 const DEFAULT_AUTH_URL = '/account/authorize';
@@ -65,7 +65,7 @@ export function createCustomerAccountClient({
   waitUntil,
   authUrl = DEFAULT_AUTH_URL,
   customAuthStatusHandler,
-}: CustomerClientOptions): CustomerClient {
+}: CustomerAccountOptions): CustomerAccount {
   if (customerApiVersion !== DEFAULT_CUSTOMER_API_VERSION) {
     console.warn(
       `[h2:warn:createCustomerAccountClient] You are using Customer Account API version ${customerApiVersion} when this version of Hydrogen was built for ${DEFAULT_CUSTOMER_API_VERSION}.`,

packages/hydrogen/src/customer/types.ts

@@ -42,7 +42,7 @@ export interface CustomerAccountMutations {
   // '#graphql mutation m1 {...}': {return: M1Mutation; variables: M1MutationVariables};
 }
 
-export type CustomerClient = {
+export type CustomerAccount = {
   /** Start the OAuth login flow. This function should be called and returned from a Remix action. It redirects the customer to a Shopify login domain. It also defined the final path the customer lands on at the end of the oAuth flow with the value of the `return_to` query param. (This is automatically setup unless `customAuthStatusHandler` option is in use) */
   login: () => Promise<Response>;
   /** On successful login, the customer redirects back to your app. This function validates the OAuth response and exchanges the authorization code for an access token and refresh token. It also persists the tokens on your session. This function should be called and returned from the Remix loader configured as the redirect URI within the Customer Account API settings in admin. */
@@ -87,7 +87,7 @@ export type CustomerClient = {
   >;
 };
 
-export type CustomerClientOptions = {
+export type CustomerAccountOptions = {
   /** The client requires a session to persist the auth and refresh token. By default Hydrogen ships with cookie session storage, but you can use [another session storage](https://remix.run/docs/en/main/utils/sessions) implementation.  */
   session: HydrogenSession;
   /** Unique UUID prefixed with `shp_` associated with the application, this should be visible in the customer account api settings in the Hydrogen admin channel. Mock.shop doesn't automatically supply customerAccountId. Use `h2 env pull` to link your store credentials. */
@@ -108,7 +108,7 @@ export type CustomerClientOptions = {
 
 /** Below are types meant for documentation only. Ensure it stay in sync with the type above. */
 
-export type CustomerClientForDocs = {
+export type CustomerAccountForDocs = {
   /** Start the OAuth login flow. This function should be called and returned from a Remix action. It redirects the customer to a Shopify login domain. It also defined the final path the customer lands on at the end of the oAuth flow with the value of the `return_to` query param. (This is automatically setup unless `customAuthStatusHandler` option is in use) */
   login?: () => Promise<Response>;
   /** On successful login, the customer redirects back to your app. This function validates the OAuth response and exchanges the authorization code for an access token and refresh token. It also persists the tokens on your session. This function should be called and returned from the Remix loader configured as the redirect URI within the Customer Account API settings in admin. */
@@ -124,16 +124,16 @@ export type CustomerClientForDocs = {
   /** Execute a GraphQL query against the Customer Account API. This method execute `handleAuthStatus()` ahead of query. */
   query?: <TData = any>(
     query: string,
-    options: CustomerClientQueryOptionsForDocs,
+    options: CustomerAccountQueryOptionsForDocs,
   ) => Promise<TData>;
   /** Execute a GraphQL mutation against the Customer Account API. This method execute `handleAuthStatus()` ahead of mutation. */
   mutate?: <TData = any>(
     mutation: string,
-    options: CustomerClientQueryOptionsForDocs,
+    options: CustomerAccountQueryOptionsForDocs,
   ) => Promise<TData>;
 };
 
-export type CustomerClientQueryOptionsForDocs = {
+export type CustomerAccountQueryOptionsForDocs = {
   /** The variables for the GraphQL statement. */
   variables?: Record<string, unknown>;
 };

packages/hydrogen/src/index.ts

@@ -20,7 +20,9 @@ export type {SeoHandleFunction} from './seo/seo';
 export {Pagination, getPaginationVariables} from './pagination/Pagination';
 export {createCustomerAccountClient} from './customer/customer';
 export type {
-  CustomerClient,
+  CustomerAccount,
+  // CustomerClient is a deprecated type that will be remove after 2024-01
+  CustomerAccount as CustomerClient,
   CustomerAccountQueries,
   CustomerAccountMutations,
 } from './customer/types';

templates/demo-store/remix.env.d.ts

@@ -3,7 +3,7 @@
 /// <reference types="@shopify/oxygen-workers-types" />
 
 import type {WithCache, HydrogenCart} from '@shopify/hydrogen';
-import type {Storefront, CustomerClient} from '~/lib/type';
+import type {Storefront, CustomerAccount} from '~/lib/type';
 import type {AppSession} from '~/lib/session.server';
 
 declare global {
@@ -34,7 +34,7 @@ declare module '@shopify/remix-oxygen' {
     waitUntil: ExecutionContext['waitUntil'];
     session: AppSession;
     storefront: Storefront;
-    customerAccount: CustomerClient;
+    customerAccount: CustomerAccount;
     cart: HydrogenCart;
     env: Env;
   }

templates/skeleton/remix.env.d.ts

@@ -5,7 +5,11 @@
 // Enhance TypeScript's built-in typings.
 import '@total-typescript/ts-reset';
 
-import type {Storefront, CustomerClient, HydrogenCart} from '@shopify/hydrogen';
+import type {
+  Storefront,
+  CustomerAccount,
+  HydrogenCart,
+} from '@shopify/hydrogen';
 import type {AppSession} from '~/lib/session';
 
 declare global {
@@ -36,7 +40,7 @@ declare module '@shopify/remix-oxygen' {
     env: Env;
     cart: HydrogenCart;
     storefront: Storefront;
-    customerAccount: CustomerClient;
+    customerAccount: CustomerAccount;
     session: AppSession;
     waitUntil: ExecutionContext['waitUntil'];
   }