feat: remove fetchAvailableCountries query from client (#1200)

* refactor(core): use graphql for retrieving a list of countries

* feat(client): remove unused fetchAvailableCountries query

.changeset/afraid-steaks-explode.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-client": minor
+---
+
+Remove the `fetchAvailableCountries` query as it is no longer needed in Catalyst. This helps us remove queries that are dependent on the access token.

.changeset/silly-spies-behave.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Use the `geography` node to retrieve a list of countries. This removes one less dependency on the access token.

core/app/[locale]/(default)/cart/_components/checkout-summary.tsx

@@ -6,7 +6,7 @@ import { FragmentOf, graphql } from '~/client/graphql';
 import { CouponCode } from './coupon-code';
 import { CouponCodeFragment } from './coupon-code/fragment';
 import { ShippingEstimator } from './shipping-estimator';
-import { ShippingEstimatorFragment } from './shipping-estimator/fragment';
+import { GeographyFragment, ShippingEstimatorFragment } from './shipping-estimator/fragment';
 import { getShippingCountries } from './shipping-estimator/get-shipping-countries';
 
 const MoneyFieldsFragment = graphql(`
@@ -42,18 +42,19 @@ export const CheckoutSummaryFragment = graphql(
 );
 
 interface Props {
-  data: FragmentOf<typeof CheckoutSummaryFragment>;
+  checkout: FragmentOf<typeof CheckoutSummaryFragment>;
+  geography: FragmentOf<typeof GeographyFragment>;
 }
 
-export const CheckoutSummary = async ({ data }: Props) => {
+export const CheckoutSummary = async ({ checkout, geography }: Props) => {
   const locale = await getLocale();
   const t = await getTranslations({ locale, namespace: 'Cart.CheckoutSummary' });
   const format = await getFormatter({ locale });
   const messages = await getMessages({ locale });
 
-  const shippingCountries = await getShippingCountries();
+  const { cart, grandTotal, subtotal, taxTotal } = checkout;
 
-  const { cart, grandTotal, subtotal, taxTotal } = data;
+  const shippingCountries = await getShippingCountries({ geography });
 
   return (
     <>
@@ -68,7 +69,7 @@ export const CheckoutSummary = async ({ data }: Props) => {
       </div>
 
       <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
-        <ShippingEstimator checkout={data} shippingCountries={shippingCountries} />
+        <ShippingEstimator checkout={checkout} shippingCountries={shippingCountries} />
       </NextIntlClientProvider>
 
       {cart?.discountedAmount && (
@@ -85,7 +86,7 @@ export const CheckoutSummary = async ({ data }: Props) => {
       )}
 
       <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
-        <CouponCode checkout={data} />
+        <CouponCode checkout={checkout} />
       </NextIntlClientProvider>
 
       {taxTotal && (

core/app/[locale]/(default)/cart/_components/shipping-estimator/fragment.ts

@@ -29,3 +29,16 @@ export const ShippingEstimatorFragment = graphql(
   `,
   [ShippingOptionsFragment, ShippingInfoFragment],
 );
+
+export const GeographyFragment = graphql(
+  `
+    fragment GeographyFragment on Geography {
+      countries {
+        entityId
+        name
+        code
+      }
+    }
+  `,
+  [],
+);

core/app/[locale]/(default)/cart/_components/shipping-estimator/get-shipping-countries.ts

@@ -1,8 +1,15 @@
-import { getCountries } from '~/client/management/get-countries';
+import { FragmentOf } from 'gql.tada';
+
 import { getShippingZones } from '~/client/management/get-shipping-zones';
 
-export const getShippingCountries = async () => {
-  const [shippingZones, allCountries] = await Promise.all([getShippingZones(), getCountries()]);
+import { GeographyFragment } from './fragment';
+
+interface GetShippingCountries {
+  geography: FragmentOf<typeof GeographyFragment>;
+}
+
+export const getShippingCountries = async ({ geography }: GetShippingCountries) => {
+  const shippingZones = await getShippingZones();
 
   const uniqueCountryZones = shippingZones.reduce<string[]>((zones, item) => {
     item.locations.forEach(({ country_iso2 }) => {
@@ -24,11 +31,12 @@ export const getShippingCountries = async () => {
     return zones;
   }, []);
 
-  const shippingCountries = allCountries.flatMap((countryDetails) => {
-    const isCountryInTheList = uniqueCountryZones.includes(countryDetails.country_iso2);
+  const countries = geography.countries ?? [];
+  const shippingCountries = countries.flatMap((countryDetails) => {
+    const isCountryInTheList = uniqueCountryZones.includes(countryDetails.code);
 
     if (isCountryInTheList) {
-      const { id, country: name, country_iso2: countryCode } = countryDetails;
+      const { entityId: id, name, code: countryCode } = countryDetails;
 
       return { id, name, countryCode };
     }

core/app/[locale]/(default)/cart/page.tsx

@@ -12,6 +12,7 @@ import { CartItem, CartItemFragment } from './_components/cart-item';
 import { CheckoutButton } from './_components/checkout-button';
 import { CheckoutSummary, CheckoutSummaryFragment } from './_components/checkout-summary';
 import { EmptyCart } from './_components/empty-cart';
+import { GeographyFragment } from './_components/shipping-estimator/fragment';
 
 export const metadata = {
   title: 'Cart',
@@ -38,9 +39,12 @@ const CartPageQuery = graphql(
           ...CheckoutSummaryFragment
         }
       }
+      geography {
+        ...GeographyFragment
+      }
     }
   `,
-  [CartItemFragment, CheckoutSummaryFragment],
+  [CartItemFragment, CheckoutSummaryFragment, GeographyFragment],
 );
 
 export default async function CartPage({ params: { locale } }: Props) {
@@ -70,6 +74,7 @@ export default async function CartPage({ params: { locale } }: Props) {
 
   const cart = data.site.cart;
   const checkout = data.site.checkout;
+  const geography = data.geography;
 
   if (!cart) {
     return <EmptyCart locale={locale} />;
@@ -88,7 +93,7 @@ export default async function CartPage({ params: { locale } }: Props) {
         </ul>
 
         <div className="col-span-1 col-start-2 lg:col-start-3">
-          {checkout && <CheckoutSummary data={checkout} />}
+          {checkout && <CheckoutSummary checkout={checkout} geography={geography} />}
 
           <NextIntlClientProvider locale={locale} messages={{ Cart }}>
             <CheckoutButton cartId={cartId} />

packages/client/src/client.ts

@@ -105,27 +105,6 @@ class Client<FetcherRequestInit extends RequestInit = RequestInit> {
     return response.json() as Promise<BigCommerceResponse<TResult>>;
   }
 
-  async fetchAvailableCountries() {
-    const response = await fetch(
-      `https://${adminApiHostname}/stores/${this.config.storeHash}/v2/countries?limit=250`,
-      {
-        method: 'GET',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-          'X-Auth-Token': this.config.xAuthToken,
-          'User-Agent': this.backendUserAgent,
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`Unable to get available Countries List: ${response.statusText}`);
-    }
-
-    return response.json() as Promise<unknown>;
-  }
-
   async fetchCountryStates(id: number) {
     const response = await fetch(
       `https://${adminApiHostname}/stores/${this.config.storeHash}/v2/countries/${id}/states?limit=60`,