Fetch Product variant by SKU works in storefront but not in independent JavaScript program

Question

If I put below script in theme.liquid(Shopify storefront), I get expected result:

<script>
    const GRAPHQL_URL = 'https://<my-store>/admin/variants/search.json?query=sku:big-mug-black';
    
    const GRAPHQL_BODY = {
        'method': 'GET',
        'headers': {
            'Content-Type': 'application/json',
        },
    };
    
    fetch(GRAPHQL_URL, GRAPHQL_BODY)
        .then(res => res.json())
        .then(console.log)
        .catch(console.error);
    
  </script>

But If I try to execute same piece of code from JavaScript program, I get 404({errors: "Not Found"})

const GRAPHQL_URL = `https://<my-proxy>.herokuapp.com/https://<my-store>/admin/variants/search.json?query=sku:big-mug-black`;
            const STOREFRONT_ACCESS_TOKEN = '<my-token>';
            const GRAPHQL_BODY = {
                'method': 'GET',
                'headers': {
                    'Authorization': `Basic ${btoa('<my-api-key>' + ':' + '<my-password>')}`,
                    'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
                    'Content-Type': 'application/json',
                },
            };

            fetch(GRAPHQL_URL, GRAPHQL_BODY)
                .then(res => res.json())
                .then(console.log)
                .catch(console.error);

Note: I can fetch all products using same program, so its not an permission issue. Is there something I need to add/remove to achieve same result in my local JavaScript program? Thank you.

Answer 1

I might have solution just for your need. You gonna need following accesses:

read_products - for finding product
read_script_tags - for read existing script tags
write_script_tags - for writing new script tag

First on your application create console action that will be run automatically every X hours. That action shall download all existing products. You gonna need save them to local database.

Things to remember during downloading all products.

1. Api limits watch for them in headers (X_SHOPIFY_SHOP_API_CALL_LIMIT)
2. Pagination, there is variable link in headers (Api pagination)

When you have stored all products locally, you can create search method for it using SKU.

When you have working method you can create find method in your controller. You will use this method to create request from shopify page to your server.

After creating this you can add JS by yourself or even better automate it with script tags. ScriptTag on Shopify are basically javascript code that you host on your side and they are automatically loaded TO EACH page in shopify (except basket).

POST /admin/api/2021-01/script_tags.json
{
  "script_tag": {
    "event": "onload",
    "src": "https://djavaskripped.org/fancy.js"
  }
}

With that you can add javascript that can be used to create find request on your website. And you can return result back.

I created simplified graph for that. .