Estoy tratando de consumir mi api a través del código. Recibo este error.
object` ("[Respuesta de objeto]") no se puede serializar como JSON
Pero cuando llamo o uso esta API a través del navegador, recibo una respuesta.
aquí está mi código https://codesandbox.io/s/naughty-platform-1xket?file=/pages/index.js
Estoy consumiendo mi API así
console.log("-----"); const cc = await fetch("https://1xket.sse.codesandbox.io/api/basecss/"); console.log(cc, "llll");Diseño de API
export default async (req, res) => { const stylesheet = await ( await fetch("https://www.****.com/asset/web/css/***-base.css", {}) ).text(); console.log(stylesheet, "server"); res.status(200).send(stylesheet); };Obtengo este valor de consola en el servidor. pero cuando llamo a esta API a través del código, aparece este error
object` ("[object Response]") cannot be serialized as JSON. Please only return JSON serializable data typesEsto se debe a que fetch devuelve unaResponse , después de que se devuelve la respuesta, debe analizar la respuesta response.json() response.text() etc. Esta también es una operación asíncrona, y creo que no puede anidar declaraciones de await como eso.
const response = await fetch("https://www.****.com/asset/web/css/***-base.css") const data = await response.text()Está recibiendo ese error porque está devolviendo un objeto de respuesta ( cc ) en su getStaticProps que no es serializable. getStaticProps y getServerSideProps solo permiten que se devuelva contenido serializable .
Para solucionar el problema, primero deberá convertir los datos de respuesta en texto antes de poder devolverlo. También deberá cambiar sus accesorios para que coincidan con los esperados en el componente IndexPage .
// pages/index.js export async function getStaticProps() { const res = await fetch("https://1xket.sse.codesandbox.io/api/basecss/"); const stylesheet = await res.text(); // Converts response data to text return { props: { stylesheet // Changes prop name from `cc` to `stylesheet` to match component } }; }La forma en que resolví esto para los tipos de Firestore, específicamente para los tipos de geopunto y marca de tiempo, fue usar algún método que transforme la propiedad no serializable en una.
CreatedAt: data.createdAt.toMillis(), updatedAt: data.updatedAt.toMillis(), coordinates: null, latitude: Number(JSON.stringify(data?.coordinates?.latitude) ), longitude: Number(JSON.stringify(data?.coordinates?.longitude)),Para los objetos de marca de tiempo de Firestore, puede usar el método .toMillis(). Para los objetos Firestore Geopoint, primero puede convertir la ubicación (coordenada) en 'nula' y luego, si necesita las propiedades específicas de latitud y longitud, puede usar las propiedades de latitud y longitud para extraerlas y luego convertirlas en "Números". ".