Storefront product API not showing product (but Shopify GraphiQL app shows it)

Retired Boards Appdev Graphql Basics And Troubleshooting
,
1

I have the following storefront GraphQL query that looks up a product info based on their handle:

query ($handle: String) {
  product(handle: $handle) {
    title
  }
}

However, it’s giving me nothing, it was working fine last week.

wilhansen_0-1710828788865.png
wilhansen_0-1710828788865.png846×423 15.8 KB

Entering the same query and variables in the Shopify GraphiQL App set to storefront, I get the expected result:

wilhansen_0-1710829494683.png
wilhansen_0-1710829494683.png1581×807 27.9 KB

So this means that it’s not the issue of the product not being published to the API.

Because of this, I assumed that the problem is the lack of permissions of the Storefront API Token. But checking the token using the storefront token list api (https://shopify.dev/docs/api/admin-rest/2024-01/resources/storefrontaccesstoken#get-storefront-access-tokens) gave me the following result:

    {
      "access_token": "====REDACTED=======",
      "access_scope": "unauthenticated_read_content,unauthenticated_read_customer_tags,unauthenticated_read_product_tags,unauthenticated_read_product_listings,unauthenticated_write_checkouts,unauthenticated_read_checkouts,unauthenticated_write_customers,unauthenticated_read_customers",
      "created_at": "2024-03-18T00:00:00Z",
      "id": 90000000000,
      "admin_graphql_api_id": "gid://shopify/StorefrontAccessToken/90000000000",
      "title": "REDACTED"
    }

Given that unauthenticated_read_product_listings is listed in the scope and my own app has read_products… It’s probably not the issue of the access scope.

I am currently stumped at this point, any ideas where I should be looking?

2

Hi @wilhansen ,

With the Storefront API and products, each app that uses the Storefront API is considered a separate ‘sales channel’ that the product needs to be published to.

So while a product might show up in a query in the Shopify GraphiQL App it could still be unpublished to other apps’ Storefront API channels.

The easiest way to check this is to go into the web admin at the product page and at the upper right in the ‘Publishing’ section under ‘Sales channels’ you will see the Shopify GraphiQL App listed there along with any other apps that have Storefront API access.

To modify the list click the 3 dots and choose ‘Manage Sales Channels’ and make sure your app is enabled. If the Storefront API access token being used to make the Storefront API queries was from the Headless channel then ‘Headless’ would be the option to enable in the sales channel list.

3

Hi @ShopifyDevSup , This is indeed a component I overlooked. I initially thought that enabling it for the Storefront API would suffice. Thanks!