I had already setup proxy with Subpath prefix as apps and subpath as proxy-1.when i am trying to access the data from application backend to my theme application by proxy api call ,the api is getting redirected itself and i am getting undifined data .How can i solve the problem of fetching data.
The first thing I did is use “shopify.app.toml” file to put the proxy settings because it will auto update the URL as needed. Example code I put there:
start of code
[app_proxy]
url = “https://base-jewelry-dayton-hold.trycloudflare.com/app/proxy”
subpath = “styledata”
prefix = “apps”
end of code
Explanation
As the URL is “https://base-jewelry-dayton-hold.trycloudflare.com/app/proxy”, so I need to create a file on “routes” folder name “app.proxy.jsx”, so it will match with the URL on the backend.
For the frontend, it will be like: my-store-url/{prefix}/{subpath}, so something like that: https://my-store-url.myshopify.com/apps/styledata
So now I can send a request by like that, I put the URL relative so it will match with store URL:
start of code
Request Data
end of code
And finally code for the backend (app.proxy.jsx)
// start of code
import db from “../db.server”;
import { authenticate } from “../shopify.server”;
import { json } from “@remix-run/node”;
export const loader = async ({ request }) => {
const { admin, session } = await authenticate.public.appProxy(request);
const shopData = await admin.rest.resources.Shop.all({ session: session });
const shopId = shopData?.data[0].id;
const styler = await db.styler.findFirst({
where: {
storeId: shopId.toString(),
},
});
const response = json({
ok: true,
message: “Success”,
data: styler,
});
return (request, response);
};
end of code
I’m using a loader because I need to fetch the data, if you need POST/PUT/DELETE etc you need to use action then.
And finally I’m getting the data the attached screenshot.
