Ecommerce Shopify WordPress Discussion

Shopify Remix App: Storefront API Undefined With AppProxy

I have an odd behaviour that I cannot quite understand: I used the shopify remix app template to create an extension that allows a customer to interact with our business backend through the store's frontend. I achieved this through a route that first makes a request to our business backend and follows that up with requests to the storefront api. When running it locally it works just fine, but when I deploy it to our dev store, I get the following error: TypeError: Cannot read properties of undefined (reading 'graphql') at getImageByVariant (/app/build/index.js:583:40) at action5 (/app/build/index.js:575:28) at Object.callRouteActionRR (/app/node_modules/@remix-run/server-runtime/dist/data.js:35:16) at callLoaderOrAction (/app/node_modules/@remix-run/router/router.ts:4020:16) at submit (/app/node_modules/@remix-run/router/router.ts:3133:16) at queryImpl (/app/node_modules/@remix-run/router/router.ts:3068:22) at Object.queryRoute (/app/node_modules/@remix-run/router/router.ts:3018:18) at handleResourceRequestRR (/app/node_modules/@remix-run/server-runtime/dist/server.js:296:20) at requestHandler (/app/node_modules/@remix-run/server-runtime/dist/server.js:104:18) The Dockercontainer is running in the cloud, I set the correct values for the environment variables for scope, shopify_key, shopify_secret and app_url and the app deploys as normal. In the partner dashboard I checked the urls => all conforming to the container's address including the app proxy. I installed it on the target shop, added the app-block to a page and opened it in preview. That is when the error occurred. This is the endpoint in question: import { json } from "@remix-run/node"; import { authenticate } from "../shopify.server"; const HTV_API_BASE_URL = process.env.HTV_API_BASE_URL export const action = async ({ request }) => { var request_params = await request.json() var token = request_params.token let data = await fetch(HTV_API_BASE_URL + '/customers/v1/access', { method: 'GET', headers: { 'Content-Type': 'multipart/form-data;', 'X-Htv-User-Token' : token } }).then(response => { return response.json(); }).catch(error => { console.log(error) return { "status" : "error" } }); // if we received correct data, enhance dataset with shopify data if (!!data && data.status == "OK") { let main_product = data.token_data.data.proposed_changes console.log(main_product) console.log(main_product.alternative) console.log(main_product.alternative.molecule_group) main_product.imageUrl = await getImageByVariant(request, main_product.shop_identifier) main_product.molecule_group = main_product.alternative.molecule_group let alternative = main_product.alternative alternative.imageUrl = await getImageByVariant(request, alternative.shop_identifier) } return data; } async function getImageByVariant(request, variant_id) { // gets the image url from shopify const { storefront } = await authenticate.public.appProxy(request); try { var shopify_variant_id = "gid:\/\/shopify\/ProductVariant\/" + variant_id const response = await storefront.graphql( `#graphql query($id: ID!) { node(id: $id) { ... on ProductVariant { id product { featuredImage { url } } } } }`, { variables: { "id" : shopify_variant_id }, }, ); // const responseJson = await response.json(); let data = await response.json(); return json({ "image_url" : data.data.node?.product?.featuredImage?.url }); } catch (error) { console.log(error) return json({ "image_url" : null }); } }; I found a lot of very similar problems, all pertaining to { admin } = authenticate.public.appProxy, but none to storefront. I presume this is due to some problem with access rights, but this is the scopes and app proxy definition from the toml: [app_proxy] url = REDACTED FOR SAFETY subpath = "oos" prefix = "apps" [access_scopes] scopes = "read_products,unauthenticated_read_product_listings" Can someone spot the mistake? I tried reinstalling the app in the store, I redeployed it to the server, I ran the app with the same config except the urls from my local machine (which worked) and then used the same config with corrected urls, => nothing changes. I cannot seem to get access. For reference, this is the log of the request towards the business server: oos?shop=*******&logged_in_customer_id=&path_prefix=%2Fapps%2Foos&timestamp=1708522357&signature=dc9b8432b9fb75138d8dd9c9c18e3ae3638c7581c27b19e97973f2ab09cc74a7
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.