Estoy tratando de crear una página Next.js simple con los datos obtenidos del backend. Para buscar estoy usando useSWR.

Si actualizo la página o la abro por primera vez después de ejecutar dev, obtengo un error de TypeScript porque el objeto data.results (datos del objeto obtenido) no está definido. Lo que me hizo creer que la API no funciona o que las funciones de obtención están mal configuradas. Sin embargo, ambos no son el caso.

Si comento las 2 líneas que tienen el objeto obtenido (data.results) y actualizo desde el navegador, puedo ver una página vacía, sin sorpresas. Después de ese punto, si elimino el comentario de console.log( data.results[1].name ) y guardo los cambios, puedo ver el nombre del producto en la consola del navegador. Lo mismo ocurre con la segunda mención de data.results. Claramente, la obtención de datos funciona porque puedo ver los datos en algunas situaciones. En este estado, si hago clic en el botón de la página de inicio, luego hago clic en el botón Prods en la página de inicio para volver, todavía funciona. Muestra los datos en la consola y también en la página. Entonces, mientras no actualice la página, funciona.

Y después de eso (sin comentar esas 2 líneas), si actualizo la página desde el navegador, obtengo TypeError nuevamente.

Antes de usar SWR, probé, useEffect y useState para el mismo propósito, pero sucedió lo mismo. También usé axioma pero nada cambió. En conclusión, no puedo crear una página simple con los contenidos extraídos del backend sin importar cuánto lo intente. Siento que me falta un conocimiento fundamental. Antes de hacer esta pregunta, revisé páginas de documentación pero nada.

En el siguiente código, trato de mostrar un botón en la página de inicio y el nombre del segundo producto. Tengo comentarios cerca de las 2 líneas que mencioné anteriormente que usan data.results. En index.js solo hay un botón que enlaza con esta página de Prods.

 import React, { useEffect, useState } from 'react'; import useSWR from 'swr' import Link from "next/link" import {Button} from '@mantine/core'; const fetcher = async (url, headers) => await fetch(url, {'method': 'GET', headers}).then(res => res.json()) function Prods() { const product_url = 'http://127.0.0.1:8000/api/product/' const headers = { 'Content-type': 'application/json', 'Authorization': `Token 9824eda0dd38b631b4aedf192899651cba91be53` } const { data, error } = useSWR([product_url, headers], fetcher) console.log(data.results[1].name) //if commented, refreshed and then uncommented it works. return ( <div> <Link href="/" passHref> <Button className = "m-1"> Homepage </Button> </Link> {/* {data.results[1].name} //if commented, refreshed and then uncommented it works. */} </div> ) } export default Prods