How to fix undefined` cannot be serialized as JSON. Please use `null` or omit this value using getStaticprops

Question

i am trying to fetch some data from an api using getStaticProps with next js. It returns the error undefinedcannot be serialized as JSON. Please usenull` or omit this value.

I have amended the code based on the solutions proposed online about the topic but none of them work.

export async function getStaticProps() {
  const propertyForSale = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`);
  
  const propertyForRent = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`);

  return {
    props: {
      // Initial code
      propertyForSale: propertyForSale?.hits,
      propertyForRent: propertyForRent?.hits,
      
      // the below snippet fixes the issue but return null
      // propertyForSale: propertyForSale?.hits ?? null,
      //propertyForRent: propertyForRent?.hits ?? null,

     //the below snippet fixes the issue but return Unexpected token u in JSON at position 0
      // propertyForSale: JSON.stringify(JSON.parse(propertyForSale?.hits))
      //propertyForRent: JSON.stringify(JSON.parse(propertyForRent?.hits)),

    }
  }
}

fetchapi.js

export const baseUrl = 'https://bayut.p.rapidapi.com'


  
  export const fetchApi = async (url) => {  
      const {result} = await axios.get((url), {
        headers: {
            'x-rapidapi-host': 'bayut.p.rapidapi.com',
            'x-rapidapi-key': process.env.NEXT_PUBLIC_BAYU_API
          },
      });
      console.log(result);
      return result;
  };

Answer 1

To fix the error I renamed constant result to data as per below. I am not sure of what is the reason of this bug, if someone wanna add something to explain the reason why naming the constant data fixed the bug be my guess.

export const fetchApi = async (url) => {  
      const {data} = await axios.get((url), {
        headers: {
            'x-rapidapi-host': 'bayut.p.rapidapi.com',
            'x-rapidapi-key': process.env.NEXT_PUBLIC_BAYU_API
          },
      });
      
      return data;
  };

export async function getStaticProps() {
  const propertyForSale = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`);
  
  const propertyForRent = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`);

  return {
    props: {
      // Initial code
      propertyForSale: propertyForSale?.hits,
      propertyForRent: propertyForRent?.hits,


    }
  }
}

Answer 2

As Lazar pointed out in his comment, in your question's code snippet, you're trying to destructure a property that doesn't exist. And since axios returns an object with the data property, you're only left with destructuring the correct property:

const { data } = await axios.get(.....)

or...

const result = await axios.get(.....);

return result.data;

if you insist on the result thing :D