Fix Storefront and i18n types (#496)

* Fix default Storefront type. Closes #486 * Add extra i18n properties to Storefront type in user app * Changeset * Simplify type in hello-world template
Shopify · Feb 13, 2023 · a1f3056 · a1f3056
1 parent 4bb7572
commit a1f3056
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 22 deletions.
diff --git a/.changeset/weak-bags-swim.md b/.changeset/weak-bags-swim.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix default Storefront type in LoaderArgs.
diff --git a/packages/hydrogen/src/storefront.ts b/packages/hydrogen/src/storefront.ts
@@ -37,7 +37,7 @@ export type StorefrontClient<TI18n extends I18nBase> = {
   storefront: Storefront<TI18n>;
 };
 
-export type Storefront<TI18n extends I18nBase> = {
+export type Storefront<TI18n extends I18nBase = I18nBase> = {
   query: <T>(
     query: string,
     payload?: StorefrontCommonOptions & {

diff --git a/templates/demo-store/app/lib/type.ts b/templates/demo-store/app/lib/type.ts
@@ -1,6 +1,5 @@
-import type {LoaderArgs} from '@shopify/remix-oxygen';
-import {Storefront as HydrogenStorefront} from '@shopify/hydrogen';
-import {
+import type {Storefront as HydrogenStorefront} from '@shopify/hydrogen';
+import type {
   CountryCode,
   CurrencyCode,
   LanguageCode,
@@ -20,12 +19,6 @@ export type I18nLocale = Locale & {
 };
 
 export type Storefront = HydrogenStorefront<I18nLocale>;
-export type StorefrontContext = {
-  storefront: Storefront;
-};
-export type StorefrontLoaderArgs = {
-  context: StorefrontContext;
-};
 
 export enum CartAction {
   ADD_TO_CART = 'ADD_TO_CART',

diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx
@@ -31,7 +31,6 @@ import {DEFAULT_LOCALE, parseMenu, type EnhancedMenu} from './lib/utils';
 import invariant from 'tiny-invariant';
 import {Shop, Cart} from '@shopify/hydrogen/storefront-api-types';
 import {useAnalytics} from './hooks/useAnalytics';
-import type {StorefrontContext} from './lib/type';
 
 const seo: SeoHandleFunction<typeof loader> = ({data, pathname}) => ({
   title: data?.layout?.shop?.name,
@@ -359,7 +358,7 @@ const CART_QUERY = `#graphql
   }
 `;
 
-export async function getCart({storefront}: StorefrontContext, cartId: string) {
+export async function getCart({storefront}: AppLoadContext, cartId: string) {
   invariant(storefront, 'missing storefront client in cart query');
 
   const {cart} = await storefront.query<{cart?: Cart}>(CART_QUERY, {

diff --git a/templates/demo-store/app/routes/($lang)/journal/index.tsx b/templates/demo-store/app/routes/($lang)/journal/index.tsx
@@ -4,7 +4,6 @@ import {flattenConnection, Image} from '@shopify/hydrogen';
 import type {Article, Blog} from '@shopify/hydrogen/storefront-api-types';
 import {Grid, PageHeader, Section, Link} from '~/components';
 import {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const';
-import {StorefrontLoaderArgs} from '~/lib/type';
 
 const BLOG_HANDLE = 'Journal';
 
@@ -14,7 +13,7 @@ export const handle = {
   },
 };
 
-export const loader = async ({context: {storefront}}: StorefrontLoaderArgs) => {
+export const loader = async ({context: {storefront}}: LoaderArgs) => {
   const {language, country} = storefront.i18n;
   const {blog} = await storefront.query<{
     blog: Blog;

diff --git a/templates/demo-store/app/routes/($lang)/policies/index.tsx b/templates/demo-store/app/routes/($lang)/policies/index.tsx
@@ -1,18 +1,17 @@
-import {json} from '@shopify/remix-oxygen';
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
 import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types';
 import invariant from 'tiny-invariant';
 
 import {PageHeader, Section, Heading, Link} from '~/components';
-import {StorefrontLoaderArgs} from '~/lib/type';
 
 export const handle = {
   seo: {
     title: 'Policies',
   },
 };
 
-export async function loader({context: {storefront}}: StorefrontLoaderArgs) {
+export async function loader({context: {storefront}}: LoaderArgs) {
   const data = await storefront.query<{
     shop: Record<string, ShopPolicy>;
   }>(POLICIES_QUERY);

diff --git a/templates/demo-store/remix.env.d.ts b/templates/demo-store/remix.env.d.ts
@@ -2,7 +2,7 @@
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 
-import type {Storefront} from '@shopify/hydrogen';
+import type {Storefront} from '~/lib/type';
 import type {HydrogenSession} from '~/lib/session.server';
 
 declare global {

diff --git a/templates/hello-world/remix.env.d.ts b/templates/hello-world/remix.env.d.ts
@@ -2,7 +2,7 @@
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 
-import type {StorefrontClient} from '@shopify/hydrogen';
+import type {Storefront} from '@shopify/hydrogen';
 import type {HydrogenSession} from '../server';
 
 declare global {
@@ -30,7 +30,7 @@ declare global {
 declare module '@shopify/remix-oxygen' {
   export interface AppLoadContext {
     session: HydrogenSession;
-    storefront: StorefrontClient['storefront'];
+    storefront: Storefront;
     env: Env;
   }
 }
diff --git a/templates/skeleton/remix.env.d.ts b/templates/skeleton/remix.env.d.ts
@@ -2,7 +2,7 @@
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 
-import type {StorefrontClient} from '@shopify/hydrogen';
+import type {Storefront} from '@shopify/hydrogen';
 import type {HydrogenSession} from '../server';
 
 declare global {
@@ -30,7 +30,7 @@ declare global {
 declare module '@shopify/remix-oxygen' {
   export interface AppLoadContext {
     session: HydrogenSession;
-    storefront: StorefrontClient['storefront'];
+    storefront: Storefront;
     env: Env;
   }
 }