Storefront API requests in Shopify Function - Crypto Error / Setting Up API Client

Storefront API requests in Shopify Function - Crypto Error / Setting Up API Client

ginacostanzo13
Shopify Partner
2 0 0

I'm trying to create a custom discount function. The actual discount functionality is done, but I want it to add a free gift to the cart. I should be able to use the Storefront API to send a post request to add an item to the cart. However, I cannot use fetch like I normally would (https://shopify.dev/docs/apps/functions/language-support/javascript#not-available-in-javy-or-shopify...). After a ton of searching, it seems like one of these is the way to go to set up a client to make requests?

// possible solution 
    const shopify = shopifyApi({
        apiKey: storefrontAccessToken,
        hostName: shop,
        apiSecretKey: '',
        hostScheme: 'https',
        apiVersion: types_1.LATEST_API_VERSION,
        isEmbeddedApp: true,
        isCustomStoreApp: false,
    });
    if (shopify) {
      console.log('The client was created.');
    }
    
    // other possible solution
    const storefrontClient = new shopify.clients.Storefront({domain: shop,storefrontAccessToken,});
    if (storefrontClient) {
      console.log('The client was created.');
    } else {
      console.log('The client was not created.');
    }
    } catch (error) {
      console.error('error: ', error.message);
    }

 

However, any time I use 

import { shopifyApi } from "@shopify/shopify-api";
I get "Error: Could not resolve crypto" (the link above also says you can't use crypto in Shopify Functions). I haven't done anything with crypto, so it's being done in Shopify's default modules that come automatically installed when you create an app. 
 
Anyone know how to fix this? Am I setting up the API client incorrectly? 
Also tried adding import '@shopify/shopify-api/adapters/node'; and I still get the same error about crypto.
 
If I do import { shopify } from "@shopify/shopify-api"; instead of import { shopifyApi } from "@shopify/shopify-api";
then I get an error that shopify does not have a clients property, or shopify could not be found. 

 

Replies 3 (3)

lizk
Shopify Staff
246 58 79

Hi there 👋

At this time network requests(API calls) are not supported at this time in Shopify Functions. 

Checkout UI extensions do allow you to make requests to the Storefront API and update the and items to the cart. Depending on your use case this may be an option for you. 

You can review the Pre-purchase upsell tutorial for a more in depth look at adding products to the cart with Checkout UI extension.l

To learn more visit the Shopify Help Center or the Community Blog.

Björn2000
Shopify Partner
1 0 0

I'm facing the same error "Could not resolve crypto" and I'm developing an Checkout UI extension with an API request. Which means we also have to import the shopify-api here, which leads to the same error.
And having a look into the "node_modules/@shopify/shopify-api/adapters/node/index.js" show why:

 

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const crypto_1 = tslib_1.__importDefault(require("crypto"));
const runtime_1 = require("../../runtime");
const adapter_1 = require("./adapter");
(0, runtime_1.setAbstractFetchFunc)(adapter_1.nodeFetch);
(0, runtime_1.setAbstractConvertRequestFunc)(adapter_1.nodeConvertRequest);
(0, runtime_1.setAbstractConvertIncomingResponseFunc)(adapter_1.nodeConvertIncomingResponse);
(0, runtime_1.setAbstractConvertResponseFunc)(adapter_1.nodeConvertAndSendResponse);
(0, runtime_1.setAbstractConvertHeadersFunc)(adapter_1.nodeConvertAndSetHeaders);
(0, runtime_1.setAbstractRuntimeString)(adapter_1.nodeRuntimeString);
(0, runtime_1.setCrypto)(crypto_1.default);

 

I would say, you are try to load a lib which is not supported and therefore not existent.
So is there any way to fix or bypass this soon?

jameshagood
Shopify Partner
37 0 16

I had this same issue. I ended up creating a route in the app itself to do the network calls and any calculations and then return what I needed from that route. then in a checkout UI extension call that route and pass whatever data that it needed and then use the response from the API call and then update a metafield or attribute somewhere and then use those values in the Shopify function.