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:

npm

npx shop-minis generate-graphql-types

Yarn

yarn shop-minis generate-graphql-types

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

npm

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

Yarn

yarn 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.

You can explore the API in sandbox mode by setting the X-Shop-Mini-Sandbox header:

curl -X POST \
  https://server.shop.app/minis/api/alpha/graphql.json \
  -H 'Content-Type: application/graphql' \
  -H 'X-Shop-Mini-Sandbox: 1' \
  -d '{your_query}'

Sandbox mode is limited to a single shop with test products. The following example fetches a test product:

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' \
  -H 'X-Shop-Mini-Sandbox: 1' \
  -d '
    query {
      shop(id: "gid://shopify/Shop/68822335510") {
        product(id: "gid://shopify/Product/7982542651414") {
          title
          featuredImage {
            url
          }
        }
      }
    }
  '

Reference

See the Shop Minis GraphQL API schema documentation for reference.