useShopQuery equilavent in v2 docs (when in components)

[Husiar]

I can't seem to find a way to solve this problem in the new Hydrogen v2.

I currently use Sanity, and use it to query for modules that include images, text components etc..
The problem occurs whenever i need to query shopify and it's based on dynamic sanity data.

For example consider this Image module that takes Sanity data:

export default function Homepage() {
  const {modules} = useLoaderData<typeof loader>(); // Sanity modules retrived from a sanity query in "loader function".

  return (
    <>
      {modules && (
              <ul>
                {modules.map((module) => {
                  return (
                    <li
                      key={module._key}
                    >
                      <div>
                        <Module module={module} />
                      </div>
                    </li>
                  );
                })}
              </ul>
      )}
    </>
  );
}

And the Module component here:

export default function ImageModule({module}: Props) {
  if (!module.image) {
    return null;
  }

  // Conditionally fetch Shopify products if this is an image module that references products
  let storefrontProducts: ProductWithNodes[];
  if (['productHotspots', 'productTags'].includes(module.variant)) {
    let products: SanityProductWithVariant[] | undefined = undefined;
    if (module.variant === 'tags') {
      products = module.tags;
    }

    if (products) {
      const [productGids, productVariantGids] = products.reduce<
        [string[], string[]]
      >(
        (acc, val) => {
          if (val) {
            acc[0].push(val.gid);
            acc[1].push(val.variantGid);
          }
          return acc;
        },
        [[], []],
      );

      // Cant dynamically fetch this data anymore in Shopify hydrogen v2
      const {data} = useShopQuery<ShopifyPayload>({
        query: QUERY_SHOPIFY,
        variables: {
          ids: productGids,
          variantIds: productVariantGids,
        },
      });
}

[davidhousedev]

You'll either need to traverse your sanity data within your loader and enrich it with data from Shopify, or you'll need to make browser requests directly to the storefront API from your React components when they render on the client.

If it were me, I'd go with the first option 😄. It requires some legwork on your part, but it means that you do all of your data fetching on the server which keeps your load speeds fast.

[juanpprieto]

As @davidhousedev pointed out there are two options:

Option A.

Move the useShopQuery logic from the ImageModule to the loader (after your sanity query) and return the enriched variants with shopify variants. This will make the variants:

• available at SSR if you await the Shopify sub-queries (recommended above the fold) or
• available at CSR if you defer the shopify sub-queries (recommended if below the fold).

Option B.

Create a resource/api endpoint /app/routes/api/product-from-gid and implement a useFetcher.load in the ImageModule to fetch the product/variant based on the id from Sanity. This will be CSR only, so you could render a placeholder during loading.

[Husiar]

As @davidhousedev pointed out there are two options:

Option A.

Move the useShopQuery logic from the ImageModule to the loader (after your sanity query) and return the enriched variants with shopify variants. This will make the variants:

• available at SSR if you await the Shopify sub-queries (recommended above the fold) or
• available at CSR if you defer the shopify sub-queries (recommended if below the fold).

Option B.

Create a resource/api endpoint /app/routes/api/product-from-gid and implement a useFetcher.load in the ImageModule to fetch the product/variant based on the id from Sanity. This will be CSR only, so you could render a placeholder during loading.

Thank you alot for your fast response, really like the shopify hydrogen staff members. A few fast questions if you don't mind :)

Which option would you recommend?
Is it only option B that is available if i wan't to show skeleton loading placeholders while page loades?
option B would load and then fetch which would result in a faster first site paint right?
First option would result in a faster full page load ofc as initial load, but when navigating afterwards as client application option B is fastest?

[juanpprieto]

Glad to help!

The recommended option depends on the context of where/when the component will be rendered.

If it's say a Product Grid section found at the top of the document (above the fold) I would do Option A + await. If on the other hand, the section is below the fold I would do Option A - defer or Option B.

Both Option B and Option A - defer will return a promise (while the rest of the query fetches) which means that you can show a placeholder in both cases. See react's <Suspense> + Remix's <Await /> on how to get a placeholder working with Option A + defer

If a section is below the fold, you could setup a placeholder with an intersection observer to only trigger the data fetching via Option B when the section is in/close to the viewport.

First option would result in a faster full page load ofc as initial load, but when navigating afterwards as client application option B is fastest?

Option A + defer (placeholder) faster page load than Option A + await (which has to wait for both queries before rendering).

[Moucky]

Hi all, this is exactly the situation I am facing. I have seen an example of Option B in the demo store but I am interested in implementing Option A. Would anyone be able to give a basic example of how I could loop through Sanity modules and enrich the data with a Shopify query?