use
The takes an existing product variant, processes a pending navigation to another product variant, and returns the data of the destination variant. This makes switching product options immediate.
- Anchor to selectedVariantselectedVariantSelectedVariantrequired
The
field queried with.- Anchor to variantsvariantsVariantsrequired
The available product variants for the product. This can be an array of variants, a promise that resolves to an array of variants, or an object with a
productkey that contains the variants.
A new product object where the
property is set to the variant that matches the current URL search params. If no variant is found, the original product object is returned. Theproperty is set totrueif thehas been optimistically changed.
OptimisticVariant<SelectedVariant = OptimisticVariantInput>
OptimisticVariant
T & {
isOptimistic?: boolean;
}OptimisticVariantInput
PartialDeep<ProductVariant>Examples
import {useLoaderData} from '@remix-run/react';
import {defer} from '@remix-run/server-runtime';
import {useOptimisticVariant} from '@shopify/hydrogen';
export async function loader({context}) {
return defer({
product: await context.storefront.query('/** product query **/'),
// Note that variants does not need to be awaited to be used by `useOptimisticVariant`
variants: context.storefront.query('/** variants query **/'),
});
}
function Product() {
const {product, variants} = useLoaderData();
// The selectedVariant optimistically changes during page
// transitions with one of the preloaded product variants
const selectedVariant = useOptimisticVariant(
product.selectedVariant,
variants,
);
// @ts-ignore
return <ProductMain selectedVariant={selectedVariant} />;
}
Examples
Example code
Description
I am the default example
JavaScript
import {useLoaderData} from '@remix-run/react'; import {defer} from '@remix-run/server-runtime'; import {useOptimisticVariant} from '@shopify/hydrogen'; export async function loader({context}) { return defer({ product: await context.storefront.query('/** product query **/'), // Note that variants does not need to be awaited to be used by `useOptimisticVariant` variants: context.storefront.query('/** variants query **/'), }); } function Product() { const {product, variants} = useLoaderData(); // The selectedVariant optimistically changes during page // transitions with one of the preloaded product variants const selectedVariant = useOptimisticVariant( product.selectedVariant, variants, ); // @ts-ignore return <ProductMain selectedVariant={selectedVariant} />; }TypeScript
import {useLoaderData} from '@remix-run/react'; import {defer, LoaderFunctionArgs} from '@remix-run/server-runtime'; import {useOptimisticVariant} from '@shopify/hydrogen'; export async function loader({context}: LoaderFunctionArgs) { return defer({ product: await context.storefront.query('/** product query */'), // Note that variants does not need to be awaited to be used by `useOptimisticVariant` variants: context.storefront.query('/** variants query */'), }); } function Product() { const {product, variants} = useLoaderData<typeof loader>(); // The selectedVariant optimistically changes during page // transitions with one of the preloaded product variants const selectedVariant = useOptimisticVariant( product.selectedVariant, variants, ); // @ts-ignore return <ProductMain selectedVariant={selectedVariant} />; }
Was this page helpful?