@shopify/create-hydrogen 5.0.23 → 5.0.25

package/dist/assets/hydrogen/starter/app/routes/account.orders._index.tsx

@@ -1,10 +1,22 @@
-import { Link, useLoaderData, type MetaFunction } from 'react-router';
+import {
+  Link,
+  useLoaderData,
+  useNavigation,
+  useSearchParams,
+} from 'react-router';
+import type {Route} from './+types/account.orders._index';
+import {useRef} from 'react';
 import {
   Money,
   getPaginationVariables,
   flattenConnection,
 } from '@shopify/hydrogen';
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {
+  buildOrderSearchQuery,
+  parseOrderFilters,
+  ORDER_FILTER_FIELDS,
+  type OrderFilterParams,
+} from '~/lib/orderFilters';
 import {CUSTOMER_ORDERS_QUERY} from '~/graphql/customer-account/CustomerOrdersQuery';
 import type {
   CustomerOrdersFragment,
@@ -12,67 +24,181 @@ import type {
 } from 'customer-accountapi.generated';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
-export const meta: MetaFunction = () => {
+type OrdersLoaderData = {
+  customer: CustomerOrdersFragment;
+  filters: OrderFilterParams;
+};
+
+export const meta: Route.MetaFunction = () => {
   return [{title: 'Orders'}];
 };
 
-export async function loader({request, context}: LoaderFunctionArgs) {
+export async function loader({request, context}: Route.LoaderArgs) {
+  const {customerAccount} = context;
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 20,
   });
 
-  const {data, errors} = await context.customerAccount.query(
-    CUSTOMER_ORDERS_QUERY,
-    {
-      variables: {
-        ...paginationVariables,
-      },
+  const url = new URL(request.url);
+  const filters = parseOrderFilters(url.searchParams);
+  const query = buildOrderSearchQuery(filters);
+
+  const {data, errors} = await customerAccount.query(CUSTOMER_ORDERS_QUERY, {
+    variables: {
+      ...paginationVariables,
+      query,
+      language: customerAccount.i18n.language,
     },
-  );
+  });
 
   if (errors?.length || !data?.customer) {
     throw Error('Customer orders not found');
   }
 
-  return {customer: data.customer};
+  return {customer: data.customer, filters};
 }
 
 export default function Orders() {
-  const {customer} = useLoaderData<{customer: CustomerOrdersFragment}>();
+  const {customer, filters} = useLoaderData<OrdersLoaderData>();
   const {orders} = customer;
+
   return (
     <div className="orders">
-      {orders.nodes.length ? <OrdersTable orders={orders} /> : <EmptyOrders />}
+      <OrderSearchForm currentFilters={filters} />
+      <OrdersTable orders={orders} filters={filters} />
     </div>
   );
 }
 
-function OrdersTable({orders}: Pick<CustomerOrdersFragment, 'orders'>) {
+function OrdersTable({
+  orders,
+  filters,
+}: {
+  orders: CustomerOrdersFragment['orders'];
+  filters: OrderFilterParams;
+}) {
+  const hasFilters = !!(filters.name || filters.confirmationNumber);
+
   return (
-    <div className="acccount-orders">
+    <div className="acccount-orders" aria-live="polite">
       {orders?.nodes.length ? (
         <PaginatedResourceSection connection={orders}>
           {({node: order}) => <OrderItem key={order.id} order={order} />}
         </PaginatedResourceSection>
       ) : (
-        <EmptyOrders />
+        <EmptyOrders hasFilters={hasFilters} />
       )}
     </div>
   );
 }
 
-function EmptyOrders() {
+function EmptyOrders({hasFilters = false}: {hasFilters?: boolean}) {
   return (
     <div>
-      <p>You haven&apos;t placed any orders yet.</p>
-      <br />
-      <p>
-        <Link to="/collections">Start Shopping →</Link>
-      </p>
+      {hasFilters ? (
+        <>
+          <p>No orders found matching your search.</p>
+          <br />
+          <p>
+            <Link to="/account/orders">Clear filters →</Link>
+          </p>
+        </>
+      ) : (
+        <>
+          <p>You haven&apos;t placed any orders yet.</p>
+          <br />
+          <p>
+            <Link to="/collections">Start Shopping →</Link>
+          </p>
+        </>
+      )}
     </div>
   );
 }
 
+function OrderSearchForm({
+  currentFilters,
+}: {
+  currentFilters: OrderFilterParams;
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigation = useNavigation();
+  const isSearching =
+    navigation.state !== 'idle' &&
+    navigation.location?.pathname?.includes('orders');
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const params = new URLSearchParams();
+
+    const name = formData.get(ORDER_FILTER_FIELDS.NAME)?.toString().trim();
+    const confirmationNumber = formData
+      .get(ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER)
+      ?.toString()
+      .trim();
+
+    if (name) params.set(ORDER_FILTER_FIELDS.NAME, name);
+    if (confirmationNumber)
+      params.set(ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER, confirmationNumber);
+
+    setSearchParams(params);
+  };
+
+  const hasFilters = currentFilters.name || currentFilters.confirmationNumber;
+
+  return (
+    <form
+      ref={formRef}
+      onSubmit={handleSubmit}
+      className="order-search-form"
+      aria-label="Search orders"
+    >
+      <fieldset className="order-search-fieldset">
+        <legend className="order-search-legend">Filter Orders</legend>
+
+        <div className="order-search-inputs">
+          <input
+            type="search"
+            name={ORDER_FILTER_FIELDS.NAME}
+            placeholder="Order #"
+            aria-label="Order number"
+            defaultValue={currentFilters.name || ''}
+            className="order-search-input"
+          />
+          <input
+            type="search"
+            name={ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER}
+            placeholder="Confirmation #"
+            aria-label="Confirmation number"
+            defaultValue={currentFilters.confirmationNumber || ''}
+            className="order-search-input"
+          />
+        </div>
+
+        <div className="order-search-buttons">
+          <button type="submit" disabled={isSearching}>
+            {isSearching ? 'Searching' : 'Search'}
+          </button>
+          {hasFilters && (
+            <button
+              type="button"
+              disabled={isSearching}
+              onClick={() => {
+                setSearchParams(new URLSearchParams());
+                formRef.current?.reset();
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      </fieldset>
+    </form>
+  );
+}
+
 function OrderItem({order}: {order: OrderItemFragment}) {
   const fulfillmentStatus = flattenConnection(order.fulfillments)[0]?.status;
   return (
@@ -82,6 +208,9 @@ function OrderItem({order}: {order: OrderItemFragment}) {
           <strong>#{order.number}</strong>
         </Link>
         <p>{new Date(order.processedAt).toDateString()}</p>
+        {order.confirmationNumber && (
+          <p>Confirmation: {order.confirmationNumber}</p>
+        )}
         <p>{order.financialStatus}</p>
         {fulfillmentStatus && <p>{fulfillmentStatus}</p>}
         <Money data={order.totalPrice} />

package/dist/assets/hydrogen/starter/app/routes/account.profile.tsx

@@ -3,27 +3,29 @@ import type {CustomerUpdateInput} from '@shopify/hydrogen/customer-account-api-t
 import {CUSTOMER_UPDATE_MUTATION} from '~/graphql/customer-account/CustomerUpdateMutation';
 import {
   data,
-  type ActionFunctionArgs,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
-import { Form, useActionData, useNavigation, useOutletContext, type MetaFunction } from 'react-router';
+  Form,
+  useActionData,
+  useNavigation,
+  useOutletContext,
+} from 'react-router';
+import type {Route} from './+types/account.profile';
 
 export type ActionResponse = {
   error: string | null;
   customer: CustomerFragment | null;
 };
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [{title: 'Profile'}];
 };
 
-export async function loader({context}: LoaderFunctionArgs) {
-  await context.customerAccount.handleAuthStatus();
+export async function loader({context}: Route.LoaderArgs) {
+  context.customerAccount.handleAuthStatus();
 
   return {};
 }
 
-export async function action({request, context}: ActionFunctionArgs) {
+export async function action({request, context}: Route.ActionArgs) {
   const {customerAccount} = context;
 
   if (request.method !== 'PUT') {
@@ -50,6 +52,7 @@ export async function action({request, context}: ActionFunctionArgs) {
       {
         variables: {
           customer,
+          language: customerAccount.i18n.language,
         },
       },
     );

package/dist/assets/hydrogen/starter/app/routes/account.tsx

@@ -1,14 +1,26 @@
-import {data as remixData, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { Form, NavLink, Outlet, useLoaderData } from 'react-router';
+import {
+  data as remixData,
+  Form,
+  NavLink,
+  Outlet,
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/account';
 import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
 
 export function shouldRevalidate() {
   return true;
 }
 
-export async function loader({context}: LoaderFunctionArgs) {
-  const {data, errors} = await context.customerAccount.query(
+export async function loader({context}: Route.LoaderArgs) {
+  const {customerAccount} = context;
+  const {data, errors} = await customerAccount.query(
     CUSTOMER_DETAILS_QUERY,
+    {
+      variables: {
+        language: customerAccount.i18n.language,
+      },
+    },
   );
 
   if (errors?.length || !data?.customer) {

package/dist/assets/hydrogen/starter/app/routes/account_.authorize.tsx

@@ -1,5 +1,5 @@
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {Route} from './+types/account_.authorize';
 
-export async function loader({context}: LoaderFunctionArgs) {
+export async function loader({context}: Route.LoaderArgs) {
   return context.customerAccount.authorize();
 }

package/dist/assets/hydrogen/starter/app/routes/account_.login.tsx

@@ -1,5 +1,7 @@
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {Route} from './+types/account_.login';
 
-export async function loader({request, context}: LoaderFunctionArgs) {
-  return context.customerAccount.login();
+export async function loader({request, context}: Route.LoaderArgs) {
+  return context.customerAccount.login({
+    countryCode: context.storefront.i18n.country,
+  });
 }

package/dist/assets/hydrogen/starter/app/routes/account_.logout.tsx

@@ -1,10 +1,11 @@
-import {redirect, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect} from 'react-router';
+import type {Route} from './+types/account_.logout';
 
 // if we don't implement this, /account/logout will get caught by account.$.tsx to do login
 export async function loader() {
   return redirect('/');
 }
 
-export async function action({context}: ActionFunctionArgs) {
+export async function action({context}: Route.ActionArgs) {
   return context.customerAccount.logout();
 }

package/dist/assets/hydrogen/starter/app/routes/api.$version.[graphql.json].tsx

@@ -1,6 +1,6 @@
-import {LoaderFunctionArgs} from 'react-router';
+import type {Route} from './+types/api.$version.[graphql.json]';
 
-export async function action({params, context, request}: LoaderFunctionArgs) {
+export async function action({params, context, request}: Route.ActionArgs) {
   const response = await fetch(
     `https://${context.env.PUBLIC_CHECKOUT_DOMAIN}/api/${params.version}/graphql.json`,
     {

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -1,13 +1,13 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { useLoaderData, type MetaFunction } from 'react-router';
+import {useLoaderData} from 'react-router';
+import type {Route} from './+types/blogs.$blogHandle.$articleHandle';
 import {Image} from '@shopify/hydrogen';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data?.article.title ?? ''} article`}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -21,11 +21,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  request,
-  params,
-}: LoaderFunctionArgs) {
+async function loadCriticalData({context, request, params}: Route.LoaderArgs) {
   const {blogHandle, articleHandle} = params;
 
   if (!articleHandle || !blogHandle) {
@@ -65,7 +61,7 @@ async function loadCriticalData({
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -1,15 +1,18 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { Link, useLoaderData, type MetaFunction } from 'react-router';
+import {
+  Link,
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/blogs.$blogHandle._index';
 import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -27,7 +30,7 @@ async function loadCriticalData({
   context,
   request,
   params,
-}: LoaderFunctionArgs) {
+}: Route.LoaderArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
@@ -60,7 +63,7 @@ async function loadCriticalData({
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 
@@ -72,7 +75,7 @@ export default function Blog() {
     <div className="blog">
       <h1>{blog.title}</h1>
       <div className="blog-grid">
-        <PaginatedResourceSection connection={articles}>
+        <PaginatedResourceSection<ArticleItemFragment> connection={articles}>
           {({node: article, index}) => (
             <ArticleItem
               article={article}

package/dist/assets/hydrogen/starter/app/routes/blogs._index.tsx

@@ -1,13 +1,19 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { Link, useLoaderData, type MetaFunction } from 'react-router';
+import {
+  Link,
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/blogs._index';
 import {getPaginationVariables} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import type {BlogsQuery} from 'storefrontapi.generated';
 
-export const meta: MetaFunction = () => {
+type BlogNode = BlogsQuery['blogs']['nodes'][0];
+
+export const meta: Route.MetaFunction = () => {
   return [{title: `Hydrogen | Blogs`}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -21,7 +27,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, request}: LoaderFunctionArgs) {
+async function loadCriticalData({context, request}: Route.LoaderArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 10,
   });
@@ -43,7 +49,7 @@ async function loadCriticalData({context, request}: LoaderFunctionArgs) {
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 
@@ -54,7 +60,7 @@ export default function Blogs() {
     <div className="blogs">
       <h1>Blogs</h1>
       <div className="blogs-grid">
-        <PaginatedResourceSection connection={blogs}>
+        <PaginatedResourceSection<BlogNode> connection={blogs}>
           {({node: blog}) => (
             <Link
               className="blog"

package/dist/assets/hydrogen/starter/app/routes/cart.$lines.tsx

@@ -1,4 +1,5 @@
-import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect} from 'react-router';
+import type {Route} from './+types/cart.$lines';
 
 /**
  * Automatically creates a new cart based on the URL and redirects straight to checkout.
@@ -18,7 +19,7 @@ import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
  *
  * ```
  */
-export async function loader({request, context, params}: LoaderFunctionArgs) {
+export async function loader({request, context, params}: Route.LoaderArgs) {
   const {cart} = context;
   const {lines} = params;
   if (!lines) return redirect('/cart');

package/dist/assets/hydrogen/starter/app/routes/cart.tsx

@@ -1,21 +1,20 @@
-import { type MetaFunction, useLoaderData } from 'react-router';
-import type {CartQueryDataReturn} from '@shopify/hydrogen';
-import {CartForm} from '@shopify/hydrogen';
 import {
+  useLoaderData,
   data,
-  type LoaderFunctionArgs,
-  type ActionFunctionArgs,
   type HeadersFunction,
-} from '@shopify/remix-oxygen';
+} from 'react-router';
+import type {Route} from './+types/cart';
+import type {CartQueryDataReturn} from '@shopify/hydrogen';
+import {CartForm} from '@shopify/hydrogen';
 import {CartMain} from '~/components/CartMain';
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
 };
 
 export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
 
-export async function action({request, context}: ActionFunctionArgs) {
+export async function action({request, context}: Route.ActionArgs) {
   const {cart} = context;
 
   const formData = await request.formData();
@@ -67,6 +66,11 @@ export async function action({request, context}: ActionFunctionArgs) {
       result = await cart.updateGiftCardCodes(giftCardCodes);
       break;
     }
+    case CartForm.ACTIONS.GiftCardCodesRemove: {
+      const appliedGiftCardIds = inputs.giftCardCodes as string[];
+      result = await cart.removeGiftCardCodes(appliedGiftCardIds);
+      break;
+    }
     case CartForm.ACTIONS.BuyerIdentityUpdate: {
       result = await cart.updateBuyerIdentity({
         ...inputs.buyerIdentity,
@@ -100,7 +104,7 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
-export async function loader({context}: LoaderFunctionArgs) {
+export async function loader({context}: Route.LoaderArgs) {
   const {cart} = context;
   return await cart.get();
 }

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx

@@ -1,15 +1,16 @@
-import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from 'react-router';
+import {redirect, useLoaderData} from 'react-router';
+import type {Route} from './+types/collections.$handle';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 import {ProductItem} from '~/components/ProductItem';
+import type {ProductItemFragment} from 'storefrontapi.generated';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -23,11 +24,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  params,
-  request,
-}: LoaderFunctionArgs) {
+async function loadCriticalData({context, params, request}: Route.LoaderArgs) {
   const {handle} = params;
   const {storefront} = context;
   const paginationVariables = getPaginationVariables(request, {
@@ -64,7 +61,7 @@ async function loadCriticalData({
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 
@@ -75,7 +72,7 @@ export default function Collection() {
     <div className="collection">
       <h1>{collection.title}</h1>
       <p className="collection-description">{collection.description}</p>
-      <PaginatedResourceSection
+      <PaginatedResourceSection<ProductItemFragment>
         connection={collection.products}
         resourcesClassName="products-grid"
       >

package/dist/assets/hydrogen/starter/app/routes/collections._index.tsx

@@ -1,10 +1,10 @@
-import { useLoaderData, Link } from 'react-router';
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, Link} from 'react-router';
+import type {Route} from './+types/collections._index';
 import {getPaginationVariables, Image} from '@shopify/hydrogen';
 import type {CollectionFragment} from 'storefrontapi.generated';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -18,7 +18,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, request}: LoaderFunctionArgs) {
+async function loadCriticalData({context, request}: Route.LoaderArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
@@ -38,7 +38,7 @@ async function loadCriticalData({context, request}: LoaderFunctionArgs) {
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 
@@ -48,7 +48,7 @@ export default function Collections() {
   return (
     <div className="collections">
       <h1>Collections</h1>
-      <PaginatedResourceSection
+      <PaginatedResourceSection<CollectionFragment>
         connection={collections}
         resourcesClassName="collections-grid"
       >