ShopifyStorefrontAPIClient Cannot read properties of undefined (reading 'get')

简体中文 讨论 技术问答

Topic summary

A developer encounters a JavaScript error “Cannot read properties of undefined (reading ‘get’)” when attempting to use the Shopify Storefront API Client in an HTML file.

Technical Setup:

  • Using Shopify Storefront API Client v0.2.3 via CDN (unpkg)
  • Attempting to create a client instance and execute a GraphQL query for product data
  • Code includes basic configuration: store domain, API version (2024-07), and public access token

Issue Details:
The error suggests the client object is not properly initialized or the API client library isn’t loading correctly. The code snippet appears corrupted or reversed in the latter portion, making it difficult to identify the exact implementation error.

Status: The question remains unanswered with no solutions or responses provided yet. The developer needs guidance on proper Shopify Storefront API Client initialization and troubleshooting the undefined property error.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

when I create a html to get shopify,I get an error :Cannot read properties of undefined (reading ‘get’). What should I do?

Here is code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/@shopify/storefront-api-client@0.2.3/dist/umd/storefront-api-client.min.js"></script>

    <script>
      async function test() {
        const client = ShopifyStorefrontAPIClient.createStorefrontApiClient({
          storeDomain: "https://mystore.myshopify.com",
          apiVersion: "2024-07",
          publicAccessToken: "my token",
        });
        console.log(client)
        const productQuery = `
       {
      	shop {
      		name
      	}
      }
      `;

        const { data, errors, extensions } = await client.request(productQuery);
        console.log(data, errors, extensions);
      }
      window.onload = function () {
        test();
      };
    </script>
  </body>
</html>