Fetching data

The Shop Minis GraphQL API allows you to fetch data for shops and products to display within your Shop Mini.

Fetching data using the SDK

The SDK provides a useMinisQuery hook for querying the API from within your Shop Mini:

Example.tsx

import {useMinisQuery} from '@shopify/shop-minis-platform-sdk'
import ExampleMiniProductQuery from './ExampleMiniProductQuery.graphql'

const Example = () => {
  const {loading, error, data} = useMinisQuery(ExampleMiniProductQuery, {
    variables: {
      shopId: 'gid://shopify/Shop/68822335510',
      productId: 'gid://shopify/Product/7982542651414',
    },
  })
  const shopName = data?.shop?.name

  return (
    <>
      {shopName ? <Text variant="headerNormal">{shopName}</Text> : null}
      {/*…*/}
    </>
  )
}

ExampleMiniProductQuery.graphql

query ExampleMiniProductQuery($shopId: ID!, $productId: ID!) {
  shop(id: $shopId) {
    name
    product(id: $productId) {
      title
      featuredImage {
        url
      }
    }
  }
}

Run the following command to generate .graphql.d.ts files for each of your .graphql files:

npx shop-minis generate-graphql-types

The command also has a --watch flag for rapid query development.

npx shop-minis generate-graphql-types --watch

Exploring the API

Requests from within your Shop Mini using the useMinisQuery hook are automatically authenticated as the current Shop user. However, during development, you may want to explore the capabilities provided by the Shop Minis API by querying it directly.

The following example fetches a test product (replace the ids with your test store and test products):

GraphQL

query {
  shop(id: "gid://shopify/Shop/68822335510") {
    product(id: "gid://shopify/Product/7982542651414") {
      title
      featuredImage {
        url
      }
    }
  }
}

curl

curl -X POST \
  https://server.shop.app/minis/api/alpha/graphql.json \
  -H 'Content-Type: application/graphql' \
  -d '
    query {
      shop(id: "gid://shopify/Shop/68822335510") {
        product(id: "gid://shopify/Product/7982542651414") {
          title
          featuredImage {
            url
          }
        }
      }
    }
  '

Caching

The Shop Minis API uses caching to ensure your queries are fast and to provide a great experience for Shop app users. This means changes to products or other resources like metafields may take several minutes to be reflected in your Mini.

Reference

See the Shop Minis GraphQL API schema documentation for reference.