How to fetch API data from Axios inside the getServerSideProps function in NextJS?

Question

I'm building an App with Next.js, and I need to connect to specific API routes (set up with API Platform) and populate pages with the route's responses.

The API is working fine, but no matter how I try to implement my Axios call inside the getServerSideProps, I always get the same error, ECONNREFUSED, from my Node stack.

I tried to get the data from useEffect() and it's working fine, but I would like to know if there's a way to call it directly in getServerSideProps.

I'm using a Node container for Docker, and the routes are authenticated through a JWT Token (stored in the session and the client cookies for the server-side connection)

Here are is my code:

pages/accounts.js:

export async function getServerSideProps(context) {
  const cookies = new Cookies(context.req.headers.cookie)
  const adminToken = cookies.get('jwtToken')

  const res = await getAllAccounts(adminToken)

  return {
    props: {
      testdata: ''
    },
  }
}

lib/accounts.js:

import service from '../service'

export const getAllAccounts = async (adminToken) => {
  const res = service({ jwtToken : adminToken }).get(`/accounts`).then((response) => {
  
  }).catch((error) => {
    console.dir(error)
  })
}

HTTP wrapper:

import axios from 'axios';
import jwt_decode from "jwt-decode";
import mockAdapter from 'axios-mock-adapter';

const service = ({ jwtToken = null, store = null, mockURL = null, mockResponse = null, multipart = false } = {}) => {
  const options = {};

  options.baseURL = process.env.NEXT_PUBLIC_API_URL + '/api';

  if(multipart === true) {
    options.headers = {
      'Content-Type': 'multipart/form-data'
    }
  } else {
    options.headers = {
      'Content-Type': 'application/ld+json',
      accept: 'application/ld+json'
    }
  }

  const instance = axios.create(options);

  instance.interceptors.response.use(response => {
    return response;
  }, error => {
    return Promise.reject(error);
  })

  if (mockURL !== null && mockResponse !== null) {
    let mock = new mockAdapter(instance);
    mock.onAny(mockURL).reply(200, mockResponse)
  }

  return instance;
};

export default service;

Through the error dump in the node stack, I managed to see that the request headers are correct, and the JWT correctly passed through.

Does the rest of the URL get added somewhere? A relative URL won't work from the server since it has no awareness of what domain it's on like a browser does. — Brian Thompson
– Brian Thompson, Commented Jan 18, 2021 at 16:07
Hi ! I added a .env.local file to specify the API URL (with process.env.NEXT_PUBLIC_API_URL). It specifies NEXT_PUBLIC_API_URL=localhost:8001 and I can see the url is correct in the error stack in the node container... I also attempted to do the axios call directly in the getServerSideProps, with the full url string, still the same result.. Do you suggest I do otherwise ? Thanks ! — Arnauf
– Arnauf, Commented Jan 18, 2021 at 16:14
As long as it's getting the full URL, I don't have another suggestion. It was just something worth checking. I see that part in the code you provided now, so that was my mistake. — Brian Thompson
– Brian Thompson, Commented Jan 18, 2021 at 16:16
getStaticProps's context does not have access to req (nor headers/cookies) as it runs on the server at build-time. Have you tried using getServerSideProps instead? — juliomalves
– juliomalves, Commented Jan 18, 2021 at 16:43
Hi ! Yes I'm so sorry, I've put the wrong function in my post. I initially tried to make things work with getServerSideProps, I will immediatly edit my post. To answer your question, same problem with getServerSideProps — Arnauf
– Arnauf, Commented Jan 18, 2021 at 16:46

cobrexus · Accepted Answer · 2021-08-20 11:44:38Z

11

Do not use Axios. Just use fetch().

Next.js polyfills fetch() by default on both the client and server, so you can just use it:

In addition to fetch() on the client-side, Next.js polyfills fetch() in the Node.js environment. You can use fetch() in your server code (such as getStaticProps/getServerSideProps) without using polyfills such as isomorphic-unfetch or node-fetch.

Source.

answered Aug 20, 2021 at 11:44

cobrexus

4,8845 gold badges24 silver badges53 bronze badges

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

Comments

Maxim · Accepted Answer · 2022-07-03 11:22:13Z

3

getServerSideProps works well with axios if we return response.data

export const getServerSideProps: GetStaticProps = async ({ params }) => {
  const { brandName } = params as IParams;
  const brandData = await $host.get(`api/brand/${brandName}`).then(response => response.data);

  return {
    props: {
      brand: brandData,
    },
  };
};

answered Jul 3, 2022 at 11:22

Maxim

1837 bronze badges

Comments

Asen Mitrev · Accepted Answer · 2021-09-03 08:57:36Z

2

Your problem is that your async method does not return a promise.

import service from '../service'

export const getAllAccounts = async (adminToken) => {
  const res = service({ jwtToken : adminToken }).get(`/accounts`);
  return res;
}

answered Sep 3, 2021 at 8:57

Asen Mitrev

7134 silver badges12 bronze badges

Comments

judlup · Accepted Answer · 2021-10-02 14:42:59Z

In my NextJS begining I followed this tutorial , and I changed fetch to axios in this way:

export const getStaticPaths = async () => {
   const res = await fetch('https://jsonplaceholder.typicode.com/users');
   const data = await res.json();

   const paths = data.map((ninja) => {
     return {
       params: { id: ninja.id.toString() },
     };
   });

   return {
     paths,
     fallback: false,
   };
};

export const getStaticProps = async (context) => {
   const id = context.params.id;
   const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
   const data = await res.json();

   return {
     props: { ninja: data },
   };
};

I applied the change using useEffect()

useEffect(() => {
    // const data = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    // const res = await data.json();
    // setninja(res);
    const fetchData = async () => {
      const result = await axios(`https://jsonplaceholder.typicode.com/users/${id}`);

      setninja(result.data);
    };

    fetchData();
    console.log(data);
  }, []);

I hope this info will be useful for you.

Titan7Web · Accepted Answer · 2022-07-20 07:46:08Z

0

I Used Axios in getServerSideProps without any problems.

export const getServerSideProps: GetServerSideProps = async({
  params,
  res
}) => {
  try {
    const response = await axios.get(`/api/test`);
    return {
      props: {
        data: response.data
      },
    }
  } catch {
    res.statusCode = 404;
    return {
      props: {}
    };
  }
};

answered Jul 20, 2022 at 7:46

Titan7Web

11 bronze badge

Collectives™ on Stack Overflow

How to fetch API data from Axios inside the getServerSideProps function in NextJS?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related