Valid store domain must be provided issue - Storefront API Client

[baturalposma]

Hi everyone,

Even though I entered the storeDomain and publicAccessToken values ​​correctly and the Shopify support team verified that these values ​​were correct,

I am encountering the error Storefront API Client: a valid store domain must be provided.

Has anyone encountered this problem before? In the application I created, all permissions in the Storefront API access scopes section have been granted.

Can someone with knowledge on this subject help?

Here is my code:

import { createStorefrontApiClient } from '@shopify/storefront-api-client';

const client = createStorefrontApiClient({
  storeDomain: 'http://domain-name.myshopify.com/',
  apiVersion: '2024-07',
  publicAccessToken: 'store-front-api-here'
});

export const fetchCollectionByHandle = async (handle) => {

  const query = `
    query {
      collectionByHandle(handle: "${handle}") {
        id
        title
        products(first: 10) {
          edges {
            node {
              id
              title
              description
              images(first: 1) {
                edges {
                  node {
                    url
                  }
                }
              }
            }
          }
        }
      }
    }
  `;

  try {
    const response = await client.query({
      data: query
    });

    const products = response.data;

    if (!products || products.length === 0) {
      throw new Error('No products found in this collection.');
    }

    return products;
  } catch (error) {
    console.error('Error fetching products by collection handle:', error);
    return [];
  }
};

Thanks,

[sle-c]

Hi @baturalposma,

What is the shop's domain you're trying to connect to? I used the following script and were able to get the products list .

import { createStorefrontApiClient } from '@shopify/storefront-api-client';

const client = createStorefrontApiClient({
  storeDomain: 'http://<shop>.myshopify.com',
  apiVersion: '2024-07',
  publicAccessToken: '<access-token>'
});
export const fetchCollectionByHandle = async (handle) => {

  const query = `
    query {
      collectionByHandle(handle: "${handle}") {
        id
        title
        products(first: 10) {
          edges {
            node {
              id
              title
              description
              images(first: 1) {
                edges {
                  node {
                    url
                  }
                }
              }
            }
          }
        }
      }
    }
  `;

  try {

    const response = await client.request(query);

    const products = response.data.collectionByHandle.products.edges;

    if (!products || products.length === 0) {
      throw new Error('No products found in this collection.');
    }

    return products;
  } catch (error) {
    console.error('Error fetching products by collection handle:', error);
    return [];
  }
};

const products = await fetchCollectionByHandle("snowboard");
console.log(products);

[baturalposma]

Hi @sle-c

here is my shopify domain: eson-direct.myshopify.com

thanks for taking a look.

[DaniEspi]

Exact same issue here. Any updates on the solutions? I tried everything but it doesn't seem to work, I validated the domain, versions and token values with a request made on postman and it worked.

[baturalposma]

Hey @DaniEspi , were you able to resolve the issue?

[lizkenyon]

Hi folks 👋

In the original scenario this was caused because the above code was running in a React Native application.

It was resolved for now by adding the react-native-url-polyfill to the application.

I am going to close this ticket. If you are seeing a similar error and not in a React Native application please create a new ticket with the details providing code for reproduction.