Sistema de comentarios
Contenido del curso
Sistema de comentarios
Contenido del curso
Carlos Rodríguez
Carlos Perilla
Carlos Perilla
Ameth Ordoñez Erazo
Diana Martinez
Carlos Perilla
Para los que no entiendan de donde sale la propiedad comments, este realmente es parte del objeto data() que forma ser parte de lo que obtenemos con el options asyncData(), realmente este options devuelve un objeto lo que pasa es que es confuso porque el return dice article y destructurado es { article, comments }, el código pudo estar escrito así:
asyncData({ params, $http }) { const { slug } = params; const data = $http.$get( `.../.netlify/functions/article?slug=${slug}`, ); return data; },
.
Es decir que como siempre devuelve un objeto, entonces el data será destructruado en { article, comments } y podemos acceder a ellos con el this.
.
Es lo mismo que el código esté escrito de esta manera:
async asyncData({ params, $http }) { const { slug } = params; const data = await $http.$get( `.../.netlify/functions/article?slug=${slug}`, ); const { article, comments } = data; return { article, comments }; },
.
Claro, en este caso debe ser async aunque ya pordefecto lo sea ya que internamente queremos destructurar los datos y retornar lo que realmente queremos.
.
Referencias:
data-fetching/#async-data
directory-structure/pages#asyncdata
Si has usado useAsyncData (Nuxt 3), habras notado que al hacer Deploy en Netlify, articles es devuelto no como un Proxy, sino como un String.
Así que recurrimos a la documentación: https://nuxt.com/docs/api/composables/use-async-data
Y usamos la función transform para procesar la información, y parsearla en caso de ser String (Netlify) u Object (Desarrollo local).
Así es mi código en index, uso pickle para solo seleccionar articles, en caso de extender el API:
const { data: { value: { articles }}} = await useAsyncData('articles', () => $fetch(url), { pick: ['articles'], transform(data) { // Para respuestas JSON no parseadas if (typeof data === 'string') { return JSON.parse(data) } return data } })
Para la URL en Nuxt 3 dado a que vamos yendo y viniendo de servidor a cliente, he preferido usar Variables de Entorno: https://nuxt.com/docs/guide/going-further/runtime-config
¿Por qué no utiliza el modulo $http para hacer la petición post de los comentarios, en cambio utiliza un fetch normal?
Para ejemplificar los diferentes casos de uso
En caso de usar useFetch en lugar de fetch, es necesario ajustar lo siguiente en comment.js o comment.mjs.
Añadir el siguiente control de acceso a los headers:
// Permite que la petición se pueda hacer con useFetch. // https://stackoverflow.com/a/65007227 'Access-Control-Allow-Headers': '*'
Y en el handler, justo antes del manejo de error con POST, para que al recibir OPTIONS del navegador, habilite el acceso en lugar de un error:
// Esto tambien es para evitar problemas con el navegador. if (httpMethod === 'OPTIONS') return {statusCode: 200, headers}
