NextJS: Error serializing `.data.data` returned from `getServerSideProps`

Question

I'm new to NextJS. I'm working on a simple page in which I need to retrieve data from my backend app. My backend app is a totally separate app written in go. My undestanding is that I must use getServerSideProps to get data from the server on load, so I've got the following:

myProject/pages/category/new.js:

export default function AddNewCategory(data) {
...
}

export const getServerSideProps = async () => {
    const data = await getAllCategories();
    console.log(await data)
    return {
        props: {
            data: { data }
        }
    };
};

myProject/api/category.js:

import axios from "axios";

// getAllCategories returns a list of all active categories
export const getAllCategories = async() => {

    axios.get("http://127.0.0.1:8080/api/v1/categories")
        .then(function (response) {
            console.log(response.data)
            return response.data;
        })
        .catch(error => {
            console.error("error")
            console.log(error)
        })

}

As you can see I've got a print statement in getAllCategories which prints:

{
  data: [
    {
      id: 1,
      name: 'Pop',
      slug: 'pop',
      description: 'Pop',
      parent: 0,
      active: true,
      created_at: '2022-05-03T19:50:00-04:00',
      updated_at: '2022-05-03T19:50:00-04:00',
      deleted_at: null
    },
    {
      id: 3,
      name: 'Pop 2',
      slug: 'pop-2',
      description: 'Pop',
      parent: 0,
      active: true,
      created_at: '2022-05-03T19:50:24-04:00',
      updated_at: '2022-05-03T19:50:24-04:00',
      deleted_at: null
    }
  ]
}

yet I'm getting the following error:

error - Error: Error serializing .data.data returned from getServerSideProps in "/category/new". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

I saw around that I should try to convert the data to string and then back to json:

return { 
  props: { 
    data: JSON.parse(JSON.stringify(data)) 
  } 
};

but when I do this I'm getting a different error:

error - SyntaxError: Unexpected token u in JSON at position 0

I'm using [email protected]

Any idea what's going on?

While you're correct in saying the console.log(response.data) is logging the right thing, that's not what await getAllCategories() actually returns. That's because you're missing a return statement right before the axios call, i.e. return axios.get(...).then(...).catch(...). Otherwise that function simply returns undefined. — juliomalves
– juliomalves, Commented May 7, 2022 at 17:57
you're correct @juliomalves, that solved my issue. Please add your comment as an answer so I can mark it as the correct answer so it can be more visible to other people. Thanks — MrCujo
– MrCujo, Commented May 7, 2022 at 22:54

paulin-crtn · Accepted Answer · 2022-05-10 16:03:31Z

1

I believe you have to convert your json to a javascript object with .json(). The following code comes from nextjs documentation.

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await getAllCategories();
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

EDIT

In this particular case it was not necessary to add const data = await res.json() because the request is made via axios, and in axios responses are already served as javascript object, so there's no need to parse.

edited May 10, 2022 at 16:03

answered May 7, 2022 at 7:11

paulin-crtn

3932 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrCujo Over a year ago

Hi. I did what you suggested but am getting now: TypeError: Cannot read properties of undefined (reading 'json')

paulin-crtn Over a year ago

Right, because as mentioned @juliomalves you should add return right before the axios call in your getAllCategories function, otherwise the function doesn't return anything (that's probably why you're getting an undefined error).

MrCujo Over a year ago

yes, you guys are right, that was the issue. Thanks a lot

Collectives™ on Stack Overflow

NextJS: Error serializing `.data.data` returned from `getServerSideProps`

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related