Skip to main content

useShopQuery

The useShopQuery hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a ShopifyProvider component.

Note: queryShop is the API route version of useShopQuery. Use queryShop to query the Storefront API within API routes.

Example code​

import {useShopQuery, gql} from '@shopify/hydrogen';

export default function Blog() {
  const {data} = useShopQuery({
    query: QUERY,
    variables: {
      handle: 'frontpage',
    },
  });

  return <h1>{data.blog.articles.edges[0].node.title}</h1>;
}

const QUERY = gql`
  fragment ArticleDetails on Article {
    id
    title
    body: contentHtml
  }

  fragment BlogDetails on Blog {
    articles(first: 1) {
      edges {
        node {
          ...ArticleDetails
        }
      }
    }
  }

  query blogContent($handle: String!) {
    blog: blogByHandle(handle: $handle) {
      ...BlogDetails
    }
  }
`;

Arguments​

The useShopQuery takes an object as its only argument, with the following keys:

KeyRequiredDescription
queryYesA string of the GraphQL query.
variablesNoAn object of the variables for the GraphQL query.
cacheNoThe caching strategy to help you determine which cache control header to set.
preloadNoWhether to preload the request. It defaults to true only when the CachingStrategy is not CacheNone. Specify false to disable or use '*' to preload the query for all requests.

Return value​

The useShopQuery returns an object with the following key:

KeyDescription
dataThe data returned by the query.