Shopify / hydrogen-v1

React-based framework for building dynamic, Shopify-powered custom storefronts.

Home Page:https://shopify.github.io/hydrogen-v1/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useQuery throws an error saying useQuery isn't exported when using in a custom hook

NotoriousGOR opened this issue · comments

What is the location of your example repository?

No response

What version of Hydrogen are you using?

^1.5.0

What version of Remix are you using?

No response

Steps to Reproduce

So, I am using Oxygen as my hosting platform.

  1. Create a custom hook that uses useQuery for a 3rd party API. Specifically, I'm using it like this:
export function useGetBuilderContent(model: string, queryName: string) {
  const {data} = Shopify.useQuery(queryName, async () => {
    return await builder
      .get(model)
      .promise()
      .then(({data}) => data);
  });

  return data;
}
  1. Use the new custom hook in an SSR component
  2. Run yarn build or the equivalent for your package manager

The only way to fix it, for now, is to change the import statement from:
import {useQuery, useServerProps} from '@shopify/hydrogen';

To:
import * as Shopify from '@shopify/hydrogen';

Expected Behavior

It's bundled as expected and succeeds in the build process.

Actual Behavior

Fails with an error message:

'useQuery' is not exported by node_modules/@shopify/hydrogen/dist/esnext/client.js, imported by src/lib/hooks.ts

👋 This looks like a Hydrogen v1 issue. useQuery etc are no longer part of Hydrogen 2023.1, which was released today. I'm going to transfer your issue to the correct repo.

👋 This looks like a Hydrogen v1 issue. useQuery etc are no longer part of Hydrogen 2023.1, which was released today. I'm going to transfer your issue to the correct repo.

Thank you and congrats @jplhomer + Shopify!