Fetching draft products with the storefront API

Solved
Wakers
Visitor
2 0 0

I am looking to fetch draft products with the storefront api so I can continue to develop locally with draft products and not use an entirely different API just so I can work with draft products in my local development environment.

I have tried querying the status, only to fetch all active products.

 

 

products(first: 10, query: "status:draft") {
    edges {
      node {
        title
      }
    }
  }

 

 

 

Accepted Solution (1)
Liam
Shopify Staff
Shopify Staff
1882 202 577

This is an accepted solution.

Hi Wakers,

 

Typically you'd use the Shopify Admin API to make requests to products and filter based on the `status` field, eg: GET /admin/api/2023-07/products.json?status=draft

 

If you really need to only use the Storefront API and want to simulate a "draft" environment, one workaround could be:

 

  • Use a specific tag (e.g., "draft_for_dev") for products you consider as drafts.
  • Fetch products with this tag using the Storefront API.
  • Ensure that products with this tag are not visible to your real customers. You can do this by not publishing them to the sales channels or by using some theme logic to hide products with this tag.


However, this approach has its limitations, involves some manual work, and might not be suitable for all use cases. It's a bit of a hack and is more of a workaround than a true solution, so I'd recommend using the Admin API to work with draft products.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 2 (2)
Liam
Shopify Staff
Shopify Staff
1882 202 577

This is an accepted solution.

Hi Wakers,

 

Typically you'd use the Shopify Admin API to make requests to products and filter based on the `status` field, eg: GET /admin/api/2023-07/products.json?status=draft

 

If you really need to only use the Storefront API and want to simulate a "draft" environment, one workaround could be:

 

  • Use a specific tag (e.g., "draft_for_dev") for products you consider as drafts.
  • Fetch products with this tag using the Storefront API.
  • Ensure that products with this tag are not visible to your real customers. You can do this by not publishing them to the sales channels or by using some theme logic to hide products with this tag.


However, this approach has its limitations, involves some manual work, and might not be suitable for all use cases. It's a bit of a hack and is more of a workaround than a true solution, so I'd recommend using the Admin API to work with draft products.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Wakers
Visitor
2 0 0

Thanks for the reply Liam. That's a great help.

 

As long as I know the storefront API is not intended to fetch draft products I can set it up properly with the admin API.