Error when publishing a product to online store( Your app doesn't have a publication for this shop).

[Wakil_eFoli]

After creating a product I'm trying to publish it to the online store. The product is getting published but I'm getting the following error:

Error: Your app doesn't have a publication for this shop.

Here is my code:

// Publish the new;y created product.
const publishProductRequest = await admin.graphql(
  `#graphql
  mutation publishProduct($id: ID!, $input: [PublicationInput!]!) {
    publishablePublish(id: $id, input: $input) {
      userErrors {
        field
        message
      }
      publishable {
        availablePublicationCount
        publicationCount
        publishedOnCurrentPublication
      }
      shop {
        id
        name
        publicationCount
      }
    }
  }`,
  {
    variables: {
      id: productId,
      input: {
        publicationId: onlineStorePublicationId,
      },
    },
  }
);

const publishProductResponse = await publishProductRequest.json();

return json(publishProductResponse);

However I got an similar question in this discussion and an accepted solution which is: The app needed storefront API access to set the product to Online Store. But I couldn't comprehend the solution. 

Can anyone please help with the issue? TIA

[Jclewis1989]

Hey there! I think your app may not have the necessary permissions to publish products to the online store, or the publication ID being used might be incorrect....possibly.

That being said, I would recommend to check the following in your configurations / app.

1. Storefront API Access: First, make sure that your app has access to the Storefront API. This is really essential for publishing products to the online store. You can check and update your app's permissions in the Shopify Partners dashboard.

2. Correct Publication ID: Verify that the onlineStorePublicationId you're using in your mutation is correct. This ID should correspond to the publication where you want to publish your product (in this case, the online store). You can retrieve the correct publication ID by querying the publications object in the Shopify Admin API.

3. API Version: Check if you are using the correct and latest version of Shopify’s API. Outdated API versions might not support certain features or have different requirements.

4. Product ID: Make sure the productId you're using is correct and corresponds to a valid product in the Shopify store.

I am not 100% sure the reason as to the error message you're receiving, but perhaps some of the techniques I mentioned above may spark additional thoughts and lead you down a helpful path.

One more thought though...let's check out the query, #1 in particular.

1. Parameter Structure: In your mutation, the input parameter is expected to be an array ([PublicationInput!]!), but in the variables you're providing, input is an object. This discrepancy might cause an error. You should provide the input as an array of objects. For example:
   1. input: [{ publicationId: onlineStorePublicationId }]
2. Variable Declarations: Ensure that the productId and onlineStorePublicationId variables are correctly declared and hold the appropriate values before they are used in the GraphQL mutation.
3. Error Handling: The code seems to assume that publishProductRequest.json() will always succeed. It's good practice to handle potential errors in network requests or JSON parsing. Consider adding a try-catch block or similar error handling.
4. Publication ID Verification: Make sure that onlineStorePublicationId is the correct ID for the online store publication. You might need to retrieve this ID from Shopify if you haven't already.
5. App Permissions: Ensure that your app has the necessary permissions to perform this operation, as mentioned in your earlier query.
6. Awaiting Asynchronous Calls: Your usage of await implies that this code is inside an async function. Make sure the entire execution context supports asynchronous operations.

[Wakil_eFoli]

How can I give Storefront API access to my app? 

[Wakil_eFoli]

Hey @Jclewis1989 thanks a lot for this detailed answer.
Everything is alright except the Storefront API. Could you please tell me where did you find that Storefront Api is essential for publishing products to the online store?
Also how can I make sure that my app has access to the Storefront API. I need to do it from the app using api, I can't do it from Partners dashboard.

Your help will be greatly appreciated. Thanks again.

[Jclewis1989]

Hey there! My apologies for the confusion, "publishing"...not so much. Wrong word. Displaying would be more appropriate. I believe the Shopify Admin API is more suited for that granularity of creating data.

I've gone through some docs to refresh for my own edification. This Github repo may be of some assistance - https://github.com/Shopify/storefront-api-learning-kit

It looks like the Shopify docs refer to authentication for the Storefront API here - https://shopify.dev/docs/api/storefront#authentication

And here...https://shopify.dev/docs/api/usage/authentication#access-tokens-for-the-storefront-api

The Storefront API has two levels of access: unauthenticated and authenticated.

1. Unauthenticated Access:

   • All users have read-only access to the Storefront API.
   • No username or password is required for unauthenticated access.
   • Apps that want to use the Storefront API must request relevant unauthenticated access scopes during OAuth or authentication in the Shopify admin.

2. Authenticated Access:

   • Requests to the GraphQL Storefront API require a valid Shopify access token.
   • There are two types of authenticated access:
     • Public access: Used for querying the API from a browser or mobile app.
     • Private access: Used for querying the API from a server or other private context, such as a Hydrogen backend.

So, all that being said, I think the below process is accurate based off the docs I'm reading.

Here are the general steps to include scopes:

1. Create or Obtain an Access Token: You need to create or obtain an access token from Shopify with the desired scopes. This is usually done through the OAuth2 authentication flow. During this process, you specify which scopes your app requires. Shopify will then issue an access token with those scopes.

2. Use the Access Token in Your cURL Command: Once you have the access token with the necessary scopes, you can include it in your cURL command using the 'X-Shopify-Storefront-Access-Token' header.

curl -X POST \
  	https://{shop}.myshopify.com/api/{API Version}/graphql.json \
  	-H 'Content-Type: application/json' \
  	-H 'X-Shopify-Storefront-Access-Token: {your-access-token-with-scopes}' \
  	-d '{
    	"query": "{your_query}"
  	}'

Keep in mind, I've done a good amount of research via the docs, but I haven't tested this out in my development environment...so I can't say 100% for certain this approach is a best practice. I generally dive into the Shopify Admin API for most of my work. Let me know if this makes sense!

[Wakil_eFoli]

Thanks again for the reply @Jclewis1989.

But you know where am I getting really confused is when I see the official doc for publishablePublish no where it is written that I need the storefront access to use this mutation. Moreover if you see the example here in Remix you'll see that they've also used the admin access_token. 

Example from official doc: 

const { admin } = await authenticate.admin(request);

const response = await admin.graphql(
  `#graphql
  mutation publishablePublish($id: ID!, $input: [PublicationInput!]!) {
    publishablePublish(id: $id, input: $input) {
      publishable {
        availablePublicationCount
        publicationCount
      }
      shop {
        publicationCount
      }
      userErrors {
        field
        message
      }
    }
  }`,
  {
    variables: {
      "id": "gid://shopify/Product/558169081",
      "input": {
        "publicationId": "gid://shopify/Publication/762454635"
      }
    },
  },
);

const data = await response.json();

So my question is where and when exactly should I use the Storefront access_token? 

[Jclewis1989]

I have a hunch we may be straying away from the original error message:

- Your app doesn't have a publication for this shop.

That being said, are you utilizing the Storefront API in any respects? Or needing to?

Differences below:

- Shopify Admin API: This API is used to manage all aspects of a Shopify store, including products, orders, customers, shipping, etc. It requires an Admin API access token, which is what you see in the documentation for the publishablePublish mutation. This mutation is part of the Admin API, which is why the example you provided uses an admin access token. The Admin API is intended for back-end operations and isn't exposed to the public or to your storefront's visitors.

- Shopify Storefront API: This API, on the other hand, is designed for front-end operations. It allows you to build custom shopping experiences on web, mobile, and in-game applications. The Storefront API is used to retrieve products, collections, and other store data that you want to display to the customer. For this API, you use a Storefront access token, which is different from the Admin API access token. The Storefront access token is meant for client-side requests and has more limited permissions, ensuring that sensitive administrative tasks cannot be performed through this token.