Sistema de comentarios

Clase 18 de 21 • Curso de Server Side Rendering con Nuxt 2

Carlos Rodríguez

student•

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

Carlos Perilla

student•

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

Ameth Ordoñez Erazo

student•

¿Por qué no utiliza el modulo $http para hacer la petición post de los comentarios, en cambio utiliza un fetch normal?

Diana Martinez

student•

Para ejemplificar los diferentes casos de uso

Carlos Perilla

student•

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}

Carlos Perilla

student•

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
        }
    })

 async asyncData({ params, $http }) {
    const { slug } = params;
    const data = await $http.$get(
      `.../.netlify/functions/article?slug=${slug}`,
    );

    const { article, comments } = data;

    return { article, comments };
  },

    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
        }
    })

Sistema de comentarios

Fundamentos de NuxtJS

Introducción a Nuxtjs

Características de NuxtJS

Cómo crear un proyecto con NuxtJS

Rutas y Componentes con NuxtJS

Rutas dinámicas con NuxtJS

Maquetación de vistas en nuestro proyecto

Creación del componente para las cards

Integración del intérprete de Markdown en NuxtJS

Cómo agregar SEO y meta tags en NuxtJS

Built-In Components

Backend con Airtable y Netlify Functions

Backend con Airtable

Despliegue y API con Netlify

Configuración de Netlify

Programando las funciones para Netlify

Consumo de nuestro backend con Netlify

Módulos de NuxtJS

Usando el módulo HTTP para consumir nuestro backend

Context

Consumir el API

Sistema de comentarios

Utilidades en NuxtJS

Estrategias de renderizado

Cierre del curso

Despedida del curso