Hello Shopify Community,
I'm currently developing a Shopify app using Polaris for the frontend and Next.js for the backend. My app aims to synchronize product data from Shopify to an external service (Custom api project on nextjs, deployed on Vercel) by sending a batch of product details via POST requests.
Here's a brief overview of how my app is supposed to work:
1. I fetch a small batch of active and published products using Shopify's GraphQL API.
2. I then attempt to send this data to an external API (`https://mynextjsserver/api/document/source`) in chunks of 10 products per request.
3. The data sent includes product details along with a `source` and a `token` for authentication on the external service.
However, I'm encountering an issue where the external API, which is supposed to only accept POST requests, is somehow receiving GET requests instead. This behavior is unexpected and leads to a `405 Method Not Allowed` response from the external API.
I've thoroughly checked the server-side code (Next.js API route) to ensure it correctly handles POST requests and appropriately responds to any non-POST methods with a 405 status code. On the client side (Shopify app frontend), I'm using `fetch` to send POST requests with JSON bodies, and I've verified the request details using browser development tools.
I suspect the issue might be with how I'm triggering these POST requests from the Shopify app or possibly a misconfiguration somewhere. Below is a simplified version of the function responsible for sending the product data to the external API:
function sendProductsToMyServer(products, token) {
let promises = [];
for (let i = 0; i < products.length; i += 10) {
const chunk = products.slice(i, i + 10);
const data = {
documentDatas: JSON.stringify(chunk),
token,
source: 'SHOPIFY',
};
const promise = fetch("https://mynextjsserver/api/document/source", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
promises.push(promise);
}
Promise.all(promises).then(() => {
// Handle success
}).catch((error) => {
// Handle error
});
}Has anyone faced a similar issue or have any insights on what might be causing this behavior? Any advice on troubleshooting or fixing this issue would be greatly appreciated.
Thank you in advance for your help!
