Skip to main content


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>{[0].node.title}</h1>;

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

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

query blogContent($handle: String!) {
blog: blogByHandle(handle: $handle) {


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

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:

dataThe data returned by the query.