What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Issues with Sending POST Requests from a Shopify App to an External API

Issues with Sending POST Requests from a Shopify App to an External API

YunaCerise
Shopify Partner
3 0 0

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!

Replies 4 (4)

YunaCerise
Shopify Partner
3 0 0

Is there any documentation how to create backend api route to call third party API ? Or how to call third party API ?

aidendev
Shopify Partner
51 1 0

Have you managed to find a solution? I'm also looking to find out how to make ajax POST request calls to my external backend services.

YunaCerise
Shopify Partner
3 0 0

Unfortunately not, I've moved on to other CMS for the time being..

aidendev
Shopify Partner
51 1 0

@YunaCerise thank you for getting back to me. Last year we were able to make http post calls to our external apis but now can only perform GET. the lack of documentation for these updates is astounding