⇒ Axios

Podemos configurar atributos padrões para nossas chamadas de API com axios, como criar baseURL para facilitar requisições, colocar timeout, mensagem de timeout e dentre várias outras.

export const nomeDaApi = axios.create({
	baseURL: '<http://localhost:3000>',
	/*
	timeout: 40000 ->milessegundos,
	timeoutErrorMessage: 'Mensagem de erro',
	...
	/*
})

Mais exemplos de Configurações na documentação abaixo:

axios/axios

Interceptors

Podemos interceptar nossas requisições e respostas para melhor analisar o que está chegando e sendo enviado antes de nosso código receber ou enviar os dados. Muito útil para analisar, debugar e estudar as requisições e respostas! (Como em averiguar se um Token está sendo mandado no Header corretamente por exemplo) (Ou inserir o Token de autenticação dentro do interceptor)².

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

Mais sobre o Interceptor abaixo:

axios/axios

Token de Autenticação em todo Header

Toda vez que fazemos um Login, geramos um Token, a partir dai, podemos incluilo de maneira padronizada e geral em nossos Headers de uma API especifica configurada com axios. Para isso, no arquivo onde foi configurado a variavel representativa da API, podemos buscar o Token guardado nos Cookies ou LocalStorage, e colocar no Headers de maneira padrão.

const { usertoken: token } = parseCookies() //Usando o método de obter Cookie da Lib Nookies

export const api = axios.create(...)

// Um interceptor aqui pode ajudar a ver se o Token está indo no Header como esperado!

if(token){
	api.defaults.headers['Authorization'] = `Bearer ${token}`
}

⇒ Token no Header dinâmicamente // Server e Client Side

Quando fazemos requisições a Nivel Client, o método anterior de colocar o Token no Header geral da API irá servir perfeitamente. Pois ele executa a nível Browser, ou seja, a nivel Client Side.

Porém, quando fazemos nossas requisições a nível Servidor com os Data-Fetching do Next.js (GetServerSideProps, GetStaticProps, GetStaticPaths), temos a situação de que nossa API ainda não colocou o Token no header, porque o código que fará isso faz a nível Client-Side!

E por que? Porque nosso parseCookie não está recebendo nenhum parametro de Contexto, com esse parametro ele busca o Cookie a nível servidor, sem ele haverá a busca a nível Client!