Patch Changes

• Search & Predictive Search improvements (#2363) by @juanpprieto

• Simplified creation of app context. #2333 by @michenly

  1. Create a app/lib/context file and use createHydrogenContext in it.

  // in app/lib/context
  
  import {createHydrogenContext} from '@shopify/hydrogen';
  
  export async function createAppLoadContext(
    request: Request,
    env: Env,
    executionContext: ExecutionContext,
  ) {
      const hydrogenContext = createHydrogenContext({
        env,
        request,
        cache,
        waitUntil,
        session,
        i18n: {language: 'EN', country: 'US'},
        cart: {
          queryFragment: CART_QUERY_FRAGMENT,
        },
        // ensure to overwrite any options that is not using the default values from your server.ts
      });
  
    return {
      ...hydrogenContext,
      // declare additional Remix loader context
    };
  }
  
  

  2. Use createAppLoadContext method in server.ts Ensure to overwrite any options that is not using the default values in createHydrogenContext.

  // in server.ts
  
  - import {
  -   createCartHandler,
  -   createStorefrontClient,
  -   createCustomerAccountClient,
  - } from '@shopify/hydrogen';
  + import {createAppLoadContext} from '~/lib/context';
  
  export default {
    async fetch(
      request: Request,
      env: Env,
      executionContext: ExecutionContext,
    ): Promise<Response> {
  
  -   const {storefront} = createStorefrontClient(
  -     ...
  -   );
  
  -   const customerAccount = createCustomerAccountClient(
  -     ...
  -   );
  
  -   const cart = createCartHandler(
  -     ...
  -   );
  
  +   const appLoadContext = await createAppLoadContext(
  +      request,
  +      env,
  +      executionContext,
  +   );
  
      /**
        * Create a Remix request handler and pass
        * Hydrogen's Storefront client to the loader context.
        */
      const handleRequest = createRequestHandler({
        build: remixBuild,
        mode: process.env.NODE_ENV,
  -      getLoadContext: (): AppLoadContext => ({
  -        session,
  -        storefront,
  -        customerAccount,
  -        cart,
  -        env,
  -        waitUntil,
  -      }),
  +      getLoadContext: () => appLoadContext,
      });
    }
  

  3. Use infer type for AppLoadContext in env.d.ts

  // in env.d.ts
  
  + import type {createAppLoadContext} from '~/lib/context';
  
  + interface AppLoadContext extends Awaited<ReturnType<typeof createAppLoadContext>> {
  - interface AppLoadContext {
  -  env: Env;
  -  cart: HydrogenCart;
  -  storefront: Storefront;
  -  customerAccount: CustomerAccount;
  -  session: AppSession;
  -  waitUntil: ExecutionContext['waitUntil'];
  }
  
  

• Use type HydrogenEnv for all the env.d.ts (#2333) by @michenly

  // in env.d.ts
  
  + import type {HydrogenEnv} from '@shopify/hydrogen';
  
  + interface Env extends HydrogenEnv {}
  - interface Env {
  -   SESSION_SECRET: string;
  -  PUBLIC_STOREFRONT_API_TOKEN: string;
  -  PRIVATE_STOREFRONT_API_TOKEN: string;
  -  PUBLIC_STORE_DOMAIN: string;
  -  PUBLIC_STOREFRONT_ID: string;
  -  PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
  -  PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
  -  PUBLIC_CHECKOUT_DOMAIN: string;
  - }
  
  

• Add a hydration check for google web cache. This prevents an infinite redirect when viewing the cached version of a hydrogen site on Google. (#2334) by @blittle

  Update your entry.client.jsx file to include this check:

  + if (!window.location.origin.includes("webcache.googleusercontent.com")) {
     startTransition(() => {
       hydrateRoot(
         document,
         <StrictMode>
           <RemixBrowser />
         </StrictMode>
       );
     });
  + }
  

• Updated dependencies [a2d9acf9, c0d7d917, b09e9a4c, c204eacf, bf4e3d3c, 20a8e63b, 6e5d8ea7, 7c4f67a6, dfb9be77, 31ea19e8]:

  • @shopify/cli-hydrogen@8.4.0
  • @shopify/hydrogen@2024.7.3
  • @shopify/remix-oxygen@2.0.6