iskurbanov / theme-app-extension-react

Template for Building a Shopify Theme Extensions App with React and Tailwind CSS
https://www.buildnextshop.com/shopify-theme-extension-app
MIT License
50 stars 18 forks source link

I want to use public app proxy #41

Open iffikhan30 opened 3 months ago

iffikhan30 commented 3 months ago

add to cart component

const textProxy = () => {
  return new Promise((resolve, reject) => {
    console.log("w")
    fetch("MY_APP_URL", {
      method: 'POST',
      redirect: 'manual',
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
      }
    })
    .then(response => {
      console.log(response, 'response');
      return response; // Assuming the response is in JSON format
    })
    .then(data => {
      resolve(data);
    })
    .catch(error => {
      reject(error);
      console.log("test", error);
    });
  });
};

mport { useEffect } from "react";

export default function AddToCart(){

  useEffect(() => {
      textProxy()
        .then(data => {
          console.log('Data:', data);
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }, []);

    return (
        <div className="tw-bg-red-700 tw-text-white tw-basis-3/4 tw-flex tw-flex-nowrap tw-items-center tw-justify-center tw-cursor-pointer">
          <div className="translate tw-text-3xl tw-font-medium" onClick={textProxy}>ADD TO CART</div>
        </div>
    )
}

Inside the web proxyendpoint component in pages folder

export default function proxyEndPoint(){
    console.log("------------hit app--------------------");
    const CREATE_PRODUCTS_MUTATION = `
        mutation populateProduct($input: ProductInput!) {
            productCreate(input: $input) {
                product {
                    id
                }
            }
        }
    `;

    return(
        <div>Test</div>
    )
}

When I click function 404 error can you please assists! I am stuck!

iffikhan30 commented 3 months ago

bump

iffikhan30 commented 3 months ago
// Handle GET request
app.get("/apps/proxy", async (_req, res) => {
  console.log("GET API");
  try {
    console.log("trying...");
    res.status(200).send({ message: "Got it" });
  } catch (error) {
    res.status(500).send(error.message);
  }
});

When i hit the URL without shopify.validateAuthenticatedSession() it work fine, but when I call on my component

const textProxy = (d) => {
  return new Promise((resolve, reject) => {
    fetch("SHOP-URL/apps/proxy", {
      method: 'POST',
      redirect: 'manual',
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
      },
      body: JSON.stringify(d)
    })
    .then(response => {
      console.log(response, 'response');
      return response; // Assuming the response is in JSON format
    })
    .then(data => {
      resolve(data);
    })
    .catch(error => {
      reject(error);
      console.log("test", error);
    });
  });
};

its show me 404 error, I am stuck please!