[ci] release 2023-10

[shopify-github-actions-access]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@shopify/[email protected]

Major Changes

• The default caching strategy has been updated. The new default caching strategy provides a max-age value of 1 second, and a stale-while-revalidate value of 1 day. If you would keep the old caching values, update your queries to use CacheShort: (#1336) by @benjaminsehl

   const {product} = await storefront.query(
     `#graphql
       query Product($handle: String!) {
         product(handle: $handle) { id title }
       }
     `,
     {
       variables: {handle: params.productHandle},
  +    /**
  +     * Override the default caching strategy with the old caching values
  +     */
  +    cache: storefront.CacheShort(),
     },
   );

• Remix v2 (#1289) by @frandiox

  Hydrogen 2023-10 has upgraded to Remix v2 and is now a peer dependency.

  • Please check the Remix v2 release notes to see what needs to be changed in your app code. Common changes include:

    • Renaming types prefixed with V2_. For example, V2_MetaFunction is now MetaFunction.
    • Renaming other types like LoaderArgs and ActionArgs, which are now LoaderFunctionArgs and ActionFunctionArgs respectively.

    If you were not already using v2 flags, follow the official Remix migration guide before upgrading to v2.

  • Update to Remix v2. Remix is now a peer dependency and its version is no longer pinned. This means that you can upgrade to newer Remix 2.x versions without upgrading Hydrogen. (#1289) by @frandiox

• The Storefront API types included are now generated using @graphql-codegen/typescript@4 (changelog). This results in a breaking change if you were importing Scalars directly from @shopify/hydrogen-react or @shopify/hydrogen: (#1108) by @frandiox

   import type {Scalars} from '@shopify/hydrogen/storefront-api-types';
  
   type Props = {
  -  id: Scalars['ID']; // This was a string
  +  id: Scalars['ID']['input']; // Need to access 'input' or 'output' to get the string
   };

Patch Changes

• Add a client to query the Customer Account API (#1430) by @blittle

• Update Storefront API version to 2023-10 (#1431) by @wizardlyhel

• Custom cart methods are now stable: (#1440) by @wizardlyhel

   const cart = createCartHandler({
     storefront,
     getCartId,
     setCartId: cartSetIdDefault(),
  -  customMethods__unstable: {
  +  customMethods: {
       addLines: async (lines, optionalParams) => {
        // ...
       },
     },
   });

• Remove deprecated parameters and props (Remove deprecated getBuyerIp #1455 and Remove deprecated props #1435): (#1435) by @wizardlyhel

  • createStorefrontClient parameters buyerIp and requestGroupId
  • <Image> props loaderOptions and widths

• Add query explorer plugin to GraphiQL. Start your dev server and load http://localhost:3000/graphiql to use GraphiQL. (#1470) by @frandiox

• Updated dependencies [0ae7cbe2, ad45656c]:

  • @shopify/[email protected]

@shopify/[email protected]

Major Changes

• The Storefront API types included are now generated using @graphql-codegen/typescript@4 (changelog). This results in a breaking change if you were importing Scalars directly from @shopify/hydrogen-react or @shopify/hydrogen: (#1108) by @frandiox

   import type {Scalars} from '@shopify/hydrogen/storefront-api-types';
  
   type Props = {
  -  id: Scalars['ID']; // This was a string
  +  id: Scalars['ID']['input']; // Need to access 'input' or 'output' to get the string
   };

Patch Changes

• Remove deprecated parameters and props (Remove deprecated getBuyerIp #1455 and Remove deprecated props #1435): (#1435) by @wizardlyhel

  • createStorefrontClient parameters buyerIp and requestGroupId
  • <Image> props loaderOptions and widths

@shopify/[email protected]

Major Changes

• Remove the function export getBuyerIp, which was deprecated in 2023-07. (#1455) by @frandiox

@shopify/[email protected]

Minor Changes

• The Codegen feature is now considered stable and related dependencies have been updated. Use --codegen flag instead of --codegen-unstable to generate code from your GraphQL queries. (#1108) by @frandiox

Patch Changes

• Updated internal dependencies to improve terminal output. (#1456) by @vincentezw

  Please update the @shopify/cli dependency in your app to avoid duplicated subdependencies:

    "dependencies": {
  -   "@shopify/cli": "3.49.2",
  +   "@shopify/cli": "3.50.0",
    }

• Updated dependencies [a6f397b6, ad45656c, ad45656c, 58dc68de, 0ae7cbe2, ad45656c]:

  • @shopify/[email protected]
  • @shopify/[email protected]
  • @shopify/[email protected]

@shopify/[email protected]

Minor Changes

• Removed the patchGqlPluck named export from the main entrypoint. (#1108) by @frandiox

  Added @shopify/hydrogen-codegen/patch entrypoint that automatically patches the necessary files. This is applied automatically by Hydrogen CLI.
  If you're using the graphql-codegen CLI directly, you can either run it as a Node loader with node -r @shopify/hydrogen-codegen/patch node_modules/.bin/graphql-codegen or import it in your codegen.ts file before anything else:

  import '@shopify/hydrogen-codegen/patch';
  import {preset, schema, pluckConfig} from '@shopify/hydrogen-codegen';
  
  export default {
    overwrite: true,
    pluckConfig,
    generates: {
      'storefrontapi.generated.d.ts': {
        preset,
        schema,
        documents: ['...'],
      },
    },
  };

Patch Changes

• Remove warning when this package is used without @shopify/hydrogen. (#1108) by @frandiox

• Add support for codegen in JavaScript projects with JSDoc. (Add JSDocs to generated projects #1334) by @frandiox (#1464) by @wizardlyhel

@shopify/[email protected]

Patch Changes

• Updated dependencies [3464ec04, ad45656c]:
  • @shopify/[email protected]

[email protected]

Major Changes

• The Storefront API 2023-10 now returns menu item URLs that include the primaryDomainUrl, instead of defaulting to the Shopify store ID URL (example.myshopify.com). The skeleton template requires changes to check for the primaryDomainUrl: by @blittle

  1. Update the HeaderMenu component to accept a primaryDomainUrl and include
     it in the internal url check

  // app/components/Header.tsx
  
  + import type {HeaderQuery} from 'storefrontapi.generated';
  
  export function HeaderMenu({
    menu,
  +  primaryDomainUrl,
    viewport,
  }: {
    menu: HeaderProps['header']['menu'];
  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
    viewport: Viewport;
  }) {
  
    // ...code
  
    // if the url is internal, we strip the domain
    const url =
      item.url.includes('myshopify.com') ||
      item.url.includes(publicStoreDomain) ||
  +   item.url.includes(primaryDomainUrl)
        ? new URL(item.url).pathname
        : item.url;
  
     // ...code
  
  }

  2. Update the FooterMenu component to accept a primaryDomainUrl prop and include
     it in the internal url check

  // app/components/Footer.tsx
  
  - import type {FooterQuery} from 'storefrontapi.generated';
  + import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
  
  function FooterMenu({
    menu,
  +  primaryDomainUrl,
  }: {
    menu: FooterQuery['menu'];
  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
  }) {
    // code...
  
    // if the url is internal, we strip the domain
    const url =
      item.url.includes('myshopify.com') ||
      item.url.includes(publicStoreDomain) ||
  +   item.url.includes(primaryDomainUrl)
        ? new URL(item.url).pathname
        : item.url;
  
     // ...code
  
    );
  }

  3. Update the Footer component to accept a shop prop

  export function Footer({
    menu,
  + shop,
  }: FooterQuery & {shop: HeaderQuery['shop']}) {
    return (
      <footer className="footer">
  -      <FooterMenu menu={menu} />
  +      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
      </footer>
    );
  }

  4. Update Layout.tsx to pass the shop prop

  export function Layout({
    cart,
    children = null,
    footer,
    header,
    isLoggedIn,
  }: LayoutProps) {
    return (
      <>
        <CartAside cart={cart} />
        <SearchAside />
        <MobileMenuAside menu={header.menu} shop={header.shop} />
        <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
        <main>{children}</main>
        <Suspense>
          <Await resolve={footer}>
  -          {(footer) => <Footer menu={footer.menu}  />}
  +          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
          </Await>
        </Suspense>
      </>
    );
  }

Patch Changes

• If you are calling useMatches() in different places of your app to access the data returned by the root loader, you may want to update it to the following pattern to enhance types: (#1289) by @frandiox

  // root.tsx
  
  import {useMatches} from '@remix-run/react';
  import {type SerializeFrom} from '@shopify/remix-oxygen';
  
  export const useRootLoaderData = () => {
    const [root] = useMatches();
    return root?.data as SerializeFrom<typeof loader>;
  };
  
  export function loader(context) {
    // ...
  }

  This way, you can import useRootLoaderData() anywhere in your app and get the correct type for the data returned by the root loader.

• Updated dependencies [81400439, a6f397b6, 3464ec04, 7fc088e2, 867e0b03, ad45656c, f24e3424, 66a48573, 0ae7cbe2, 8198c1be, ad45656c]:

  • @shopify/[email protected]
  • @shopify/[email protected]
  • @shopify/[email protected]

[email protected]

Patch Changes

• Updated dependencies [81400439, a6f397b6, 3464ec04, 7fc088e2, 867e0b03, ad45656c, f24e3424, 66a48573, 0ae7cbe2, 8198c1be, ad45656c]:
  • @shopify/[email protected]
  • @shopify/[email protected]
  • @shopify/[email protected]