Have your say in Community Polls: What was/is your greatest motivation to start your own business?
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.

Hydrogen | 3rd party API calls not working on Oxygen

Solved

Hydrogen | 3rd party API calls not working on Oxygen

g3misa
Shopify Partner
24 5 15

Hi, 

I have a hydrogen website where I modified the cart.tsx action function to include a call to a 3rd party API when an item is added to the cart.  This works perfectly on localhost but when I deployed my codebase to Oxygen, this API seems to not get called.  I do not see any network logs on Chrome Dev Tools too.  Does anyone know what is happening?   My simple fetch code below.  Thanks

 

export async function action({request, context}: ActionArgs) {
  const {session, storefront} = context;
  const headers = new Headers();
  ...
  switch (cartAction) {
    case CartAction.ADD_TO_CART:
        ...
        
        let jsonData: any;

//make request to 3rd party API const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(body), cache: 'no-cache', }); jsonData = await response.json();
//do something with this data } ... return json( { cart, errors, analytics: { cartId, }, }, {status, headers}, ); }
Let's solve problems together!
Accepted Solution (1)

Weaverse
Shopify Partner
81 26 37

This is an accepted solution.

I saw no problem yet with the code. However, you can try to debug by adding console.log and try to catch the error, for example: 

try {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body),
    cache: 'no-cache',
  });
  const jsonData = await response.json();
  console.log("Data from API:", jsonData);
} catch (error) {
  console.error("Error calling API:", error);
}

 Also, it seems like returning 

{status, headers}

is redundant.

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community

View solution in original post

Replies 3 (3)

Weaverse
Shopify Partner
81 26 37

This is an accepted solution.

I saw no problem yet with the code. However, you can try to debug by adding console.log and try to catch the error, for example: 

try {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body),
    cache: 'no-cache',
  });
  const jsonData = await response.json();
  console.log("Data from API:", jsonData);
} catch (error) {
  console.error("Error calling API:", error);
}

 Also, it seems like returning 

{status, headers}

is redundant.

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
g3misa
Shopify Partner
24 5 15

So it turns out that Oxygen does not like 

 

cache: 'no-cache'

 

It was throwing an error The 'cache' field on 'RequestInitializerDict' is not implemented." so i had to remove that.

 

Console Logs are extremely helpful especially in the preview runtime logs of Oxygen.

 

Thank you @Weaverse for your help!

Let's solve problems together!
Weaverse
Shopify Partner
81 26 37

Well, I don't know that yet, either.
Oxygen is Serverless Function, actually, and somehow, many Node/JS functions will be missing; follow their docs strictly, I think 😀

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community