I am building a Next.js application with multiple pages with dynamic routing. Each page has multiple axios calls to the backend that are called with useEffect. My goal is to instead call these functions with getServerSideProps functions for speed purposes as the application is scaled to acodate a larger user database.

My issue is when i try to recieve emails from the database, I get the error:

Error: Error serializing .allEmails.config.transformRequest[0] returned from getServerSideProps in "/emails". Reason: function cannot be serialized as JSON. Please only return JSON serializable data types.

I want to recieve emails and pass it into props where i can then access the data on the page.

import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import jsHttpCookie from 'cookie';
import jsCookie from 'js-cookie';

const Emails = ({allEmails}) => {

const [emails, setEmails] = useState(allEmails);

return (
    <></>
  )
}

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const allEmails = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(allEmails, "all data")
  
    return {
        props: {
          allEmails
        }
    }
  }

export default Emails;

I am building a Next.js application with multiple pages with dynamic routing. Each page has multiple axios calls to the backend that are called with useEffect. My goal is to instead call these functions with getServerSideProps functions for speed purposes as the application is scaled to acodate a larger user database.

My issue is when i try to recieve emails from the database, I get the error:

Error: Error serializing .allEmails.config.transformRequest[0] returned from getServerSideProps in "/emails". Reason: function cannot be serialized as JSON. Please only return JSON serializable data types.

I want to recieve emails and pass it into props where i can then access the data on the page.

import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import jsHttpCookie from 'cookie';
import jsCookie from 'js-cookie';

const Emails = ({allEmails}) => {

const [emails, setEmails] = useState(allEmails);

return (
    <></>
  )
}

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const allEmails = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(allEmails, "all data")
  
    return {
        props: {
          allEmails
        }
    }
  }

export default Emails;

• javascript
• node.js
• next.js

Share Improve this question Follow edited Apr 21, 2021 at 22:28 plorp asked Apr 21, 2021 at 22:17 plorpplorp 4722 silver badges77 bronze badges 1

• The error says what's wrong, non-serializable object is provided. Use response data, not a response itself – Estus Flask Commented Apr 21, 2021 at 22:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

allEmails is actually AxiosResponse type, it is not the data you get from api. And it contains non-serializable stuff like functions and etc.

To get the data you need to access data property of this response:

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const response = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(response, "all data")
  
    return {
        props: {
          allEmails: response.data
        }
    }
  }