Estoy creando una aplicación con Next.js y necesito conectarme a rutas de API específicas (configuradas con API Platform ) y completar páginas con las respuestas de la ruta.
La API funciona bien, pero no importa cómo intente implementar mi llamada Axios dentro de getServerSideProps , siempre recibo el mismo error, ECONNREFUSED , de mi pila de nodos.
Traté de obtener los datos de useEffect() y funciona bien, pero me gustaría saber si hay una manera de llamarlo directamente en getServerSideProps .
Estoy usando un contenedor Node para Docker, y las rutas se autentican a través de un token JWT (almacenado en la sesión y las cookies del cliente para la conexión del lado del servidor)
Aquí está mi código:
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) }) }Envoltorio HTTP:
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;A través del volcado de errores en la pila de nodos, logré ver que los encabezados de solicitud son correctos y que el JWT pasó correctamente.
En mi comienzo de NextJS, seguí este tutorial y cambié fetch a axios de esta manera:
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 }, }; };Apliqué el cambio usando 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); }, []);Espero que esta información te sea útil.
Su problema es que su método asíncrono no devuelve una promesa.
import service from '../service' export const getAllAccounts = async (adminToken) => { const res = service({ jwtToken : adminToken }).get(`/accounts`); return res; }No utilice Axios. Solo usa fetch() .
Next.js polyfills fetch() de forma predeterminada tanto en el cliente como en el servidor, por lo que puede usarlo:
Además de
fetch()en el lado del cliente, Next.js polyfillsfetch()en el entorno de Node.js. Puede usarfetch()en su código de servidor (comogetStaticProps/getServerSideProps) sin usar polyfills comoisomorphic-unfetchonode-fetch.
No está utilizando jwtToken para nada después de pasarlo al servicio.
Antes de la línea const instance = axios.create(options); agrega algo como esto:
if (jwtToken !== null) { options.headers.Authorization = `Bearer ${jwtToken}` }