Anchor to available_for_sale •: Filter by products that have at least one product variant available for sale.
Anchor to created_at •: Filter by the date and time when the product was created.

Anchor to reversereverse

•Boolean

Default:false

Reverse the order of the underlying list.

Anchor to sortKeysortKey

•ProductSortKeys

Default:ID

Sort the underlying list by the given key.

Was this section helpful?

Anchor to Possible returnsPossible returns

Anchor to edgesedges •[ProductEdge!]! non-null: A list of edges.
Anchor to filtersfilters •[Filter!]! non-null: A list of available filters.
Anchor to nodesnodes •[Product!]! non-null: A list of the nodes contained in ProductEdge.
Anchor to pageInfopageInfo •PageInfo! non-null: Information to aid in pagination.

Was this section helpful?

Examples

Retrieve first three products

Description

The following example shows how to query for first three products.

Query

query getProducts($first: Int) {
  products(first: $first) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int) { products(first: $first) { edges { cursor node { title } } } }"
}'

React Router

import { unauthenticated } from "../shopify.server";

export const loader = async () => {
  const { storefront } = await unauthenticated.storefront(
    'your-development-store.myshopify.com'
  );
  const response = await storefront.graphql(
    `#graphql
  query getProducts($first: Int) {
    products(first: $first) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($first: Int) {
    products(first: $first) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});

Response

{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo2NTcyMTE2NSwibGFzdF92YWx1ZSI6IjY1NzIxMTY1In0=",
        "node": {
          "title": "Storefront Spoon"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}

Retrieve first three products in reverse order

Description

The following example shows how to query for first three products in reverse order.

Query

query getProducts($first: Int, $reverse: Boolean) {
  products(first: $first, reverse: $reverse) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int, $reverse: Boolean) { products(first: $first, reverse: $reverse) { edges { cursor node { title } } } }"
}'

React Router

import { unauthenticated } from "../shopify.server";

export const loader = async () => {
  const { storefront } = await unauthenticated.storefront(
    'your-development-store.myshopify.com'
  );
  const response = await storefront.graphql(
    `#graphql
  query getProducts($first: Int, $reverse: Boolean) {
    products(first: $first, reverse: $reverse) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($first: Int, $reverse: Boolean) {
    products(first: $first, reverse: $reverse) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});

Response

{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo5Mjk4OTg0NjUsImxhc3RfdmFsdWUiOiI5Mjk4OTg0NjUifQ==",
        "node": {
          "title": "Camper Van"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      }
    ]
  }
}

Retrieve first two products after cursor

Description

The following example shows how to query for first two products after cursor.

Query

query getProducts($first: Int, $after: String) {
  products(first: $first, after: $after) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int, $after: String) { products(first: $first, after: $after) { edges { cursor node { title } } } }"
}'

React Router

import { unauthenticated } from "../shopify.server";

export const loader = async () => {
  const { storefront } = await unauthenticated.storefront(
    'your-development-store.myshopify.com'
  );
  const response = await storefront.graphql(
    `#graphql
  query getProducts($first: Int, $after: String) {
    products(first: $first, after: $after) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($first: Int, $after: String) {
    products(first: $first, after: $after) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});

Response

{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}

Retrieve last two products before cursor

Description

The following example shows how to query for last two products before cursor.

Query

query getProducts($last: Int, $before: String) {
  products(last: $last, before: $before) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($last: Int, $before: String) { products(last: $last, before: $before) { edges { cursor node { title } } } }"
}'

React Router

import { unauthenticated } from "../shopify.server";

export const loader = async () => {
  const { storefront } = await unauthenticated.storefront(
    'your-development-store.myshopify.com'
  );
  const response = await storefront.graphql(
    `#graphql
  query getProducts($last: Int, $before: String) {
    products(last: $last, before: $before) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($last: Int, $before: String) {
    products(last: $last, before: $before) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});

Response

{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo2NTcyMTE2NSwibGFzdF92YWx1ZSI6IjY1NzIxMTY1In0=",
        "node": {
          "title": "Storefront Spoon"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",
        "node": {
          "title": "Storefront Shoes"
        }
      }
    ]
  }
}

Retrieve product that matches the query

Description

The following example shows how to query product that matches the query.

Query

query getProducts($first: Int, $query: String) {
  products(first: $first, query: $query) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int, $query: String) { products(first: $first, query: $query) { edges { cursor node { title } } } }"
}'

React Router

import { unauthenticated } from "../shopify.server";

export const loader = async () => {
  const { storefront } = await unauthenticated.storefront(
    'your-development-store.myshopify.com'
  );
  const response = await storefront.graphql(
    `#graphql
  query getProducts($first: Int, $query: String) {
    products(first: $first, query: $query) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($first: Int, $query: String) {
    products(first: $first, query: $query) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});

Response

{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",
        "node": {
          "title": "Guitar"
        }
      }
    ]
  }
}

Retrieve products after sorting by a key

Description

The following example shows how to query products after sorting by a key.

Query

query getProducts($first: Int, $sortKey: ProductSortKeys) {
  products(first: $first, sortKey: $sortKey) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int, $sortKey: ProductSortKeys) { products(first: $first, sortKey: $sortKey) { edges { cursor node { title } } } }"
}'

React Router

import { unauthenticated } from "../shopify.server";

export const loader = async () => {
  const { storefront } = await unauthenticated.storefront(
    'your-development-store.myshopify.com'
  );
  const response = await storefront.graphql(
    `#graphql
  query getProducts($first: Int, $sortKey: ProductSortKeys) {
    products(first: $first, sortKey: $sortKey) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($first: Int, $sortKey: ProductSortKeys) {
    products(first: $first, sortKey: $sortKey) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});

Response

{
  "products": {
    "edges": [
      {
        "cursor": "eyJsYXN0X2lkIjo5Mjk4OTg0NjUsImxhc3RfdmFsdWUiOiJDYW1wZXIgVmFuIn0=",
        "node": {
          "title": "Camper Van"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiJHdWl0YXIifQ==",
        "node": {
          "title": "Guitar"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiJTdG9yZWZyb250IFNob2VzIn0=",
        "node": {
          "title": "Storefront Shoes"
        }
      },
      {
        "cursor": "eyJsYXN0X2lkIjo2NTcyMTE2NSwibGFzdF92YWx1ZSI6IlN0b3JlZnJvbnQgU3Bvb24ifQ==",
        "node": {
          "title": "Storefront Spoon"
        }
      }
    ]
  }
}

Examples

import { unauthenticated } from "../shopify.server";

export const loader = async () => {

const { storefront } = await unauthenticated.storefront(

'your-development-store.myshopify.com'

);

const response = await storefront.graphql(

`#graphql

query getProducts($first: Int) {

products(first: $first) {

edges {

cursor

node {

title

}

}`,

);

const json = await response.json();

return json.data;

}

GQL

query getProducts($first: Int) {
  products(first: $first) {
    edges {
      cursor
      node {
        title
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Storefront-Access-Token: {storefront_access_token}' \
-d '{
"query": "query getProducts($first: Int) { products(first: $first) { edges { cursor node { title } } } }"
}'

React Router

import { unauthenticated } from "../shopify.server";

export const loader = async () => {
  const { storefront } = await unauthenticated.storefront(
    'your-development-store.myshopify.com'
  );
  const response = await storefront.graphql(
    `#graphql
  query getProducts($first: Int) {
    products(first: $first) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Storefront({
  domain: 'your-development-store.myshopify.com',
  storefrontAccessToken,
});
const data = await client.query({
  data: `query getProducts($first: Int) {
    products(first: $first) {
      edges {
        cursor
        node {
          title
        }
      }
    }
  }`,
});

Response

JSON

{

"products": {

"edges": [

{

"cursor": "eyJsYXN0X2lkIjo2NTcyMTE2NSwibGFzdF92YWx1ZSI6IjY1NzIxMTY1In0=",

"node": {

"title": "Storefront Spoon"

}

{

"cursor": "eyJsYXN0X2lkIjoyNjMwNzE4NTYsImxhc3RfdmFsdWUiOiIyNjMwNzE4NTYifQ==",

"node": {

"title": "Storefront Shoes"

}

{

"cursor": "eyJsYXN0X2lkIjo1Mzg4MjUyNjEsImxhc3RfdmFsdWUiOiI1Mzg4MjUyNjEifQ==",

"node": {

"title": "Guitar"

}

]

}