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;
  };

Probably it is because the data you are receiving is not shaped/of type able to be serialized as JSON. What do you get in this console.log? — Lazar Nikolic, Feb 01 '22 at 08:29
Hi @LazarNikolic the console log is not returning anything on the console. i think it is because the error get thrown before the line is processed — Leo, Feb 01 '22 at 08:49
Well, based on what you showed here, console.log should be done before final return from getStaticProps(). If you do this fetch with cURL or Postman, do you get anything? — Lazar Nikolic, Feb 01 '22 at 09:05
@LazarNikolic get i solved it seems the issue was in my fetch api function. I have to change result to data. Thanks for trying to help... :) — Leo, Feb 01 '22 at 09:34

score 4 · Answer 1 · answered May 01 '22 at 14:54

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

score 4 · Answer 2 · answered Jan 14 '23 at 16:15

4

can you try this please?

  return {
    props: {
      propertyForSale: propertyForSale?.hits || null,
      propertyForRent: propertyForRent?.hits || null,
    }
  }

answered Jan 14 '23 at 16:15

elmas

41
1

score 2 · Answer 3 · answered Feb 01 '22 at 09:41

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,


    }
  }
}

This is because axios packs returned data into data variable https://github.com/axios/axios#response-schema — Lazar Nikolic, Feb 01 '22 at 09:52

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

3 Answers3