Connect Theme App Extension with Admin API

Shopify Apps
,
1

Hello,

I am trying to show some products of merchants in my theme app extension block.

I don’t understand how can I communicate from my theme app extension block to the backend of my app. I am using the template that the Shopify v3 CLI gave me with Express in the backend. I set up an App Proxy, but I can’t catch the requests in the Express Server that I send from the client to my backend. The requests always show HTTP status 200.

My App Proxy configuration is this:

  • Subpath prefix: apps
  • Subpath: adara
  • Proxy URL: https://<<Ngrok ID>>.sa.ngrok.io/api

My client code is this:

(async () => {
    const ids = ["gid://shopify/ProductVariant/1234567890", "gid://shopify/ProductVariant/1234567891"];
    const fetchOptions = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
        }
    };
    const response = await fetch(`/apps/adara?ids=[${ids}]`, fetchOptions);
    console.log(response);
})();

In web/index.js I write a new route in the Express Server:

app.get("apps/adara", (req, res) => {
  res.status(201).send("Succeed")
})

Even if I put it on top of the other routes, I can’t catch the request. I have also tried the route “*” without success.

Is there something that I am missing?

If I want to make a GraphQL query to the admin API, do I need anything else in order to make the request inside the Express route?

Thanks in advance.

2 Likes
2

Hello, did you find a way to communicate with API?

Thanks.

F.

1 Like
3

It seems that the Express Server with the routes is meant to serve the app that runs on the merchant’s admin dashboard. It does not receive the requests that are created from the storefront or from the theme app extension. To communicate the theme app extension with the backend of the shop, you need to setup an app proxy that forwards the request to your own backend. To setup this App Proxy, you must go to App Setup in partners.shopify.com and forward the requests to your own backend.

Then in your backend, you query the Shopify APIs using the shop’s offline token (which you should have saved in your database when the merchant install your app) and return the queried data in the response.

1 Like
4

Hi in setting up my app proxy, do I use the app’s app url as the base url to build my app proxy url? When I do that I got a 200 response in html. It says the request is successful but didn’t actually return the data from backend.