Haga sus propios comentarios con Gatsby y FaunaDB

Si no ha usado Gatsby antes, lea sobre por qué es rápido en todos los sentidos importantes, y si no ha usado FaunaDB antes, se encontrará con un placer. Si está buscando hacer que sus sitios estáticos sean aplicaciones Jamstack completas, ¡esta es la solución back-end para usted!

Este tutorial solo se centrará en las operaciones que necesita para usar FaunaDB para impulsar un sistema de comentarios para un blog de Gatsby. La aplicación viene completa con campos de entrada que permiten a los usuarios comentar sus publicaciones y un área de administración para aprobar o eliminar comentarios antes de que aparezcan en cada publicación. La autenticación la proporciona el widget de identidad de Netlify y todo está integrado mediante funciones sin servidor de Netlify y una API Apollo/GraphQL que envía datos a una colección de base de datos de FaunaDB.

Elegí FaunaDB para la base de datos por varias razones. En primer lugar, ¡hay un nivel gratuito muy generoso! ¡Perfecto para esos proyectos pequeños que necesitan un back-end, hay soporte nativo para consultas GraphQL y tiene algunas funciones de indexación realmente poderosas!

…y para citar a los creadores;

No importa qué pila utilice o dónde esté implementando su aplicación, FaunaDB le brinda acceso confiable, sin esfuerzo y de baja latencia a sus datos a través de API que conoce.

Puedes ver la aplicación de comentarios terminada aquí.

Empezar

Para comenzar, clone el repositorio en https://github.com/PaulieScanlon/fauna-gatsby-comments

o:

git clone https://github.com/PaulieScanlon/fauna-gatsby-comments.git

Luego instale todas las dependencias:

npm install

También cdingrese functions/apollo-graphqle instale las dependencias para la función Netlify:

npm install

Este es un paquete separado y tiene sus propias dependencias; lo usará más adelante.

También necesitamos instalar la CLI de Netlify, ya que también la usarás más adelante:

npm install netlify-cli -g

Ahora agregamos tres archivos nuevos que no forman parte del repositorio.

En la raíz de su proyecto cree un .env.env.developmenty.env.production

Agregue lo siguiente a .env:

GATSBY_FAUNA_DB =GATSBY_FAUNA_COLLECTION =

Agregue lo siguiente a .env.development:

GATSBY_FAUNA_DB =GATSBY_FAUNA_COLLECTION =GATSBY_SHOW_SIGN_UP = trueGATSBY_ADMIN_ID =

Agregue lo siguiente a .env.production:

GATSBY_FAUNA_DB =GATSBY_FAUNA_COLLECTION =GATSBY_SHOW_SIGN_UP = falseGATSBY_ADMIN_ID =

Volverás a esto más tarde, pero en caso de que te lo preguntes

• GATSBY_FAUNA_DBes la clave secreta de FaunaDB para su base de datos
• GATSBY_FAUNA_COLLECTIONes el nombre de la colección FaunaDB
• GATSBY_SHOW_SIGN_UPse utiliza para ocultar el botón Registrarse cuando el sitio está en producción
• GATSBY_ADMIN_IDes una identificación de usuario que Netlify Identity generará para usted

Si eres del tipo curioso, puedes obtener una muestra de la aplicación ejecutándose gatsby developo yarn developy luego navegando http://localhost:8000en tu navegador.

FaunaDB

Entonces, ¡pongámonos manos a la obra, pero antes de escribir cualquier operación, dirígete a https://fauna.com/ y regístrate!

Base de datos y colección

• Cree una nueva base de datos haciendo clic en NUEVA BASE DE DATOS
• Nombra la base de datos: se llama a la base de datos de demostración.fauna-gatsby-comments
• Crea una nueva colección haciendo clic en NUEVA COLECCIÓN
• Nombra la colección: he llamado a la colección de demostración.demo-blog-comments

clave del servidor

Ahora necesitarás configurar una clave de servidor. Ir a SEGURIDAD

• Cree una nueva clave haciendo clic en NUEVA CLAVE
• Seleccione la base de datos a la que desea aplicar la clave, fauna-gatsby-commentspor ejemplo
• Establecer el rol como administrador
• Nombra la clave del servidor: he llamado a la clave de demostracióndemo-blog-server-key

Variables de entorno pt. 1

Copie la clave del servidor y agréguela GATSBY_FAUNA_DBa .env.development, .env.productiony .env.

También deberá agregar el nombre de la colección a GATSBY_FAUNA_COLLECTIONin .env.developmenty .env.production..env

Agregar estos valores .enves solo para que pueda probar sus operaciones de desarrollo de FaunaDB, lo cual hará a continuación.

Comenzamos a crear un comentario, así que regresamos a boop.js:

// boop.js...// CREATE COMMENTcreateComment: async () = {  const slug = "/posts/some-post"  const name = "some name"  const comment = "some comment"  const results = await client.query(    q.Create(q.Collection(COLLECTION_NAME), {      data: {        isApproved: false,        slug: slug,        date: new Date().toString(),        name: name,        comment: comment,      },    })  )  console.log(JSON.stringify(results, null, 2))  return {    commentId: results.ref.id,  }},...

El desglose de esta función es el siguiente;

• qes la instancia defaunadb.query
• Createes el método de FaunaDB para crear una entrada dentro de una colección
• Collectiones el área en la base de datos para almacenar los datos. Toma el nombre de la colección como primer argumento y un objeto de datos como segundo.

El segundo argumento es la forma de los datos que necesita para impulsar el sistema de comentarios de la aplicación.

Por ahora vas a codificar slug, namepero commenten la aplicación final estos valores son capturados por el formulario de entrada en la página de publicaciones y pasados ​​a través de argumentos.

El desglose de la forma es el siguiente;

• isApprovedes el estado del comentario y de forma predeterminada es falso hasta que lo aprobemos en la página de administración
• sluges la ruta a la publicación donde se escribió el comentario
• datees la marca de tiempo en que se escribió el comentario
• namees el nombre que el usuario ingresó en los comentarios de
• commentes el comentario que el usuario ingresó en el formulario de comentarios

Cuando usted (o un usuario) crea un comentario, no está realmente interesado en lidiar con la respuesta porque, en lo que respeta al usuario, todo lo que verá será un mensaje de éxito o de error.

Después de que un usuario haya publicado un comentario, irá a su cola de administración hasta que lo apruebe, pero si desea devolver algo, puede mostrarlo en la interfaz de usuario devolviendo algo de la createCommentfunción.

Crear un comentario

Si ha codificado un archivo y slugahora puede ejecutar lo siguiente en su CLInamecomment

node boop createComment

Si todo funcionó correctamente deberías ver un log en tu terminal del nuevo comentario.

{   "ref": {     "@ref": {       "id": "263413122555970050",       "collection": {         "@ref": {           "id": "demo-blog-comments",           "collection": {             "@ref": {               "id": "collections"             }           }         }       }     }   },   "ts": 1587469179600000,   "data": {     "isApproved": false,     "slug": "/posts/some-post",     "date": "Tue Apr 21 2020 12:39:39 GMT+0100 (British Summer Time)",     "name": "some name",     "comment": "some comment"   } } { commentId: '263413122555970050' }

Si te diriges a COLECCIONES en FaunaDB deberías ver tu nueva entrada en la colección.

Necesitará crear algunos comentarios más durante el desarrollo, así que cambie los valores codificados de namey commentejecute lo siguiente nuevamente.

node boop createComment

Haga esto varias veces para terminar con al menos tres comentarios nuevos almacenados en la base de datos; los usará en un momento.

Eliminar comentario por id

Ahora que puedes crear comentarios, también necesitarás poder eliminarlos.

Al agregar commentIduno de los comentarios que creó anteriormente, puede eliminarlo de la base de datos. El commentIdes el iden el ref.@refobjeto.

Nuevamente, no está realmente preocupado por el valor de retorno aquí, pero si desea que esto aparezca en la interfaz de usuario, puede hacerlo devolviendo algo de la deleteCommentByIdfunción.

// boop.js...// DELETE COMMENTdeleteCommentById: async () = {  const commentId = "263413122555970050";  const results = await client.query(    q.Delete(q.Ref(q.Collection(COLLECTION_NAME), commentId))  );  console.log(JSON.stringify(results, null, 2));  return {    commentId: results.ref.id,  };},...

El desglose de esta función es el siguiente

• clientes la instancia del cliente FaunaDB
• queryes un método para obtener datos de FaunaDB
• qes la instancia defaunadb.query
• Deletees el método de eliminación de FaunaDB para eliminar entradas de una colección
• Refes la referencia única de FaunaDB utilizada para identificar la entrada
• Collectiones el área de la base de datos donde se almacenan los datos

Si ha codificado un, commentIdahora puede ejecutar lo siguiente en su CLI:

node boop deleteCommentById

Si regresa a COLECCIONES en FaunaDB, debería ver que la entrada ya no existe en la colección.

Índices

A continuación, creará un ÍNDICE en FaunaDB.

Un ÍNDICE le permite consultar la base de datos con un término específico y definir una forma de datos específica para devolver.

Cuando se trabaja con GraphQL y/o TypeScript, esto es realmente poderoso porque puede usar índices de FaunaDB para devolver solo los datos que necesita y en una forma predecible. Esto hace que las respuestas de escritura de datos en GraphQL y/TypeScript sean un sueño... He trabajado en varias aplicaciones que simplemente devuelven un objeto masivo de valores inútiles que inevitablemente causarán errores en su aplicación. borroso!

• Vaya a ÍNDICES y haga clic en NUEVO ÍNDICE
• Nombra el índice: he llamado a esteget-all-comments
• Establezca la colección de origen con el nombre de la colección que configuró anteriormente

Como se mencionó anteriormente, cuando consulta la base de datos usando este índice, puede decirle a FaunaDB qué partes de la entrada desea devolver.

Puede hacer esto agregando "valores", pero tenga cuidado de ingresar los valores exactamente como aparecen a continuación porque (en el nivel gratuito de FaunaDB) no puede modificarlos después de haberlos creado, por lo que si hay un error tendrá para borrar el índice y empezar de nuevo… ¡qué fastidio!

Los valores que necesitas agregar son los siguientes:

• ref
• data.isApproved
• data.slug
• data.date
• data.name
• data.comment

Después de haber agregado todos los valores, puede hacer clic en GUARDAR .

Obtener todos los comentarios

// boop.js...// GET ALL COMMENTSgetAllComments: async () = {   const results = await client.query(     q.Paginate(q.Match(q.Index("get-all-comments")))   );   console.log(JSON.stringify(results, null, 2));   return results.data.map(([ref, isApproved, slug, date, name, comment]) = ({     commentId: ref.id,     isApproved,     slug,     date,     name,     comment,   })); },...

El desglose de esta función es el siguiente

• clientes la instancia del cliente FaunaDB
• queryes un método para obtener datos de FaunaDB
• qes la instancia defaunadb.query
• Paginatepagina las respuestas
• Matchdevuelve resultados coincidentes
• Indexes el nombre del índice que acabas de crear

La forma del resultado devuelto aquí es una matriz de la misma forma que usted definió en los "valores" del índice.

Si ejecuta lo siguiente, debería ver la lista de todos los comentarios que creó anteriormente:

node boop getAllComments

Obtener comentarios de slug

Adoptará un enfoque similar al anterior, pero esta vez creará un nuevo índice que le permita consultar FaunaDB de una manera diferente. La diferencia clave aquí es que cuando get-comments-by-slugnecesite informar a FaunaDB sobre este término específico , puede hacerlo agregándolo data.slugal campo Términos.

• Vaya a ÍNDICE y haga clic en NUEVO ÍNDICE
• Nombra el índice, he llamado a esteget-comments-by-slug
• Establezca la colección de origen con el nombre de la colección que configuró anteriormente
• Agregar data.slugen el campo de términos

Los valores que necesitas agregar son los siguientes:

• ref
• data.isApproved
• data.slug
• data.date
• data.name
• data.comment

Después de haber agregado todos los valores, puede hacer clic en GUARDAR.

// boop.js...// GET COMMENT BY SLUGgetCommentsBySlug: async () = {  const slug = "/posts/some-post";  const results = await client.query(    q.Paginate(q.Match(q.Index("get-comments-by-slug"), slug))  );  console.log(JSON.stringify(results, null, 2));  return results.data.map(([ref, isApproved, slug, date, name, comment]) = ({    commentId: ref.id,    isApproved,    slug,    date,    name,    comment,  }));},...

El desglose de esta función es el siguiente:

• clientes la instancia del cliente FaunaDB
• queryes un método para obtener datos de FaunaDB
• qes la instancia defaunadb.query
• Paginatepagina las respuestas
• Matchdevuelve resultados coincidentes
• Indexes el nombre del índice que acabas de crear

La forma del resultado devuelto aquí es una matriz de la misma forma que definiste en los “valores” del Índice. Puedes crear esta forma de la misma manera que lo hiciste anteriormente y asegúrate de agregar un valor para los términos. Nuevamente tenga cuidado de ingresarlos con cuidado.

Si ejecuta lo siguiente, debería ver la lista de todos los comentarios que creó anteriormente, excepto para uno específico slug:

node boop getCommentsBySlug

Aprobar comentario por id

Cuando creas un comentario, estableces manualmente el isApprovedvalor en falso. Esto evita que el comentario se muestre en la aplicación hasta que lo apruebes.

Ahora necesitarás crear una función para hacer esto, pero necesitarás codificar un archivo commentId. Utilice commentIduno de los comentarios que creó anteriormente:

// boop.js...// APPROVE COMMENT BY IDapproveCommentById: async () = {  const commentId = '263413122555970050'  const results = await client.query(    q.Update(q.Ref(q.Collection(COLLECTION_NAME), commentId), {      data: {        isApproved: true,      },    })  );  console.log(JSON.stringify(results, null, 2));  return {    isApproved: results.isApproved,  };},...

El desglose de esta función es el siguiente:

• clientes la instancia del cliente FaunaDB
• queryes un método para obtener datos de FaunaDB
• qes la instancia defaunadb.query
• Updatees el método de FaundaDB para actualizar una entrada
• Refes la referencia única de FaunaDB utilizada para identificar la entrada
• Collectiones el área de la base de datos donde se almacenan los datos

Si ha codificado un, commentIdahora puede ejecutar lo siguiente en su CLI:

node boop approveCommentById

Si ejecuta getCommentsBySlugnuevamente, ahora debería ver el isApprovedestado de la entrada que codificó commentIdpara que habrá cambiado true.

node boop getCommentsBySlug

Estas son todas las operaciones necesarias para gestionar los datos desde la aplicación.

En el repositorio, si echa un vistazo al apollo-graphql.jsque se puede encontrar, functions/apollo-graphqlverá todas las operaciones anteriores. Como se mencionó anteriormente, los valores codificados se reemplazan por args, estos son los valores pasados ​​desde varias partes de la aplicación.

Netlificar

Suponiendo que haya completado el proceso de registro de Netlify o que ya tenga una cuenta con Netlify, ahora puede enviar la aplicación de demostración a su cuenta de GitHub.

Para hacer esto, deberá inicializar git localmente, agregar un control remoto y enviar el repositorio de demostración antes de continuar.

Ahora debería poder vincular el repositorio con la implementación continua de Netlify.

Si hace clic en el botón "Nuevo sitio desde Git" en el panel de Netlify, puede autorizar el acceso a su cuenta de GitHub y seleccionar el gatsby-fauna-commentsrepositorio para habilitar la implementación continua de Netlify. Deberá haberla implementado al menos una vez para que tengamos una URL pública de su aplicación.

La URL se verá así, https://ecstatic-lewin-b1bd17.netlify.apppero no dudes en cambiarle el nombre y tomar nota de la URL, ya que la necesitarás para el paso de Netlify Identity que se menciona en breve.

Variables de entorno pt. 2

En un paso anterior, agregó la clave secreta de la base de datos de FaunaDB y el nombre de la colección a sus .envarchivos. También deberá agregar lo mismo a las variables de entorno de Netlify .

• Navegue a Configuración desde la navegación de Netlify
• Haga clic en Construir e implementar
• Seleccione Entorno o desplácese hacia abajo hasta que vea Variables de entorno
• Haga clic en Editar variables

Proceda a agregar lo siguiente:

GATSBY_SHOW_SIGN_UP = falseGATSBY_FAUNA_DB = you FaunaDB secret keyGATSBY_FAUNA_COLLECTION = you FaunaDB collection name

Mientras esté aquí, también deberá modificar la política de variables sensibles y seleccionar Implementar sin restricciones.

Widget de identidad de Netlify

Mencioné antes que cuando se crea un comentario, el isApprovedvalor se establece en false, esto evita que aparezcan comentarios en las publicaciones del blog hasta que usted (el administrador) los haya aprobado. Para convertirte en administrador necesitarás crear una identidad.

Puede lograr esto utilizando el widget de identidad de Netlify.

Si ha completado el paso anterior de Implementación continua, puede navegar a la página Identidad desde la navegación de Netlify.

No verás ningún usuario aquí todavía, así que usemos la aplicación para conectar los puntos, pero antes de hacerlo, asegúrate de hacer clic en Habilitar identidad.

Antes de continuar, solo quiero señalar que usarás netlify deven lugar de gatsby developo yarn developde ahora en adelante. Esto se debe a que utilizará algunos métodos "especiales" de Netlify en la aplicación y netlify deves necesario iniciar el servidor para activar varios procesos que utilizará.

• Haga girar la aplicación usandonetlify dev
• Navegar ahttp://localhost:8888/admin/
• Haga clic en el botón Registrarse en el encabezado

También deberá apuntar el widget Netlify Identity a la URL de su aplicación recién implementada. Esta fue la URL que mencioné y que deberá anotar antes; si no ha cambiado el nombre de su aplicación, se verá así. https://ecstatic-lewin-b1bd17.netlify.app/Habrá un mensaje en la ventana emergente para establecer la URL del sitio .

Ahora puede completar los pasos de registro necesarios.

Después de registrarse, recibirá un correo electrónico pidiéndole que confirme su identidad y, una vez completado, actualice la página de Identidad en Netlify y debería verse como un usuario.

Ahora es el momento de iniciar sesión, pero antes de hacer esto busque Identity.jsy src/componentsdescomente temporalmente la console.log()línea 14. Esto registrará el objeto de usuario de Netlify Identity en la consola.

• Reinicie su servidor local
• Haga girar la aplicación nuevamente usandonetlify dev
• Haga clic en el botón Iniciar sesión en el encabezado

Si todo esto funciona, debería poder ver un registro de la consola para netlifyIdentity.currentUser:buscar la idclave y copiar el valor.

Establezca esto como el valor para GATSBY_ADMIN_ID =ambos .env.productiony.env.development

Ahora puedes eliminar de forma segura la console.log()línea 14 Identity.jso simplemente comentarla nuevamente.

GATSBY_ADMIN_ID = your Netlify Identity user id

…y finalmente

• Reinicie su servidor local
• Haga girar la aplicación nuevamente usandonetlify dev

Ahora deberías poder iniciar sesión como “Administrador”… ¡Hurra!

Navegue http://localhost:8888/admin/e inicie sesión.

Es importante tener en cuenta que aquí lo usará localhost:8888para el desarrollo ahora y NO, localhost:8000que es más común con el desarrollo de Gatsby.

Antes de probar esto en el entorno implementado, asegúrese de volver a las variables de entorno de Netlify y agregar su usuario de identidad de Netlify ida las variables de entorno.

• Navegue a Configuración desde la navegación de Netlify
• Haga clic en Construir e implementar
• Seleccione Entorno o desplácese hacia abajo hasta que vea Variables de entorno
• Haga clic en Editar variables

Proceda a agregar lo siguiente:

GATSBY_ADMIN_ID = your Netlify Identity user id

Si juega con la aplicación e ingresa algunos comentarios en cada una de las publicaciones, regrese a la página de administración y podrá elegir aprobar o eliminar los comentarios.

Naturalmente, solo se mostrarán los comentarios aprobados en una publicación determinada y los eliminados desaparecerán para siempre.

Si ha utilizado este tutorial para su proyecto, me encantaría saber de usted en @pauliescanlon.

---

Por Paulie Scanlon ( @pauliescanlon ), desarrollador de interfaz de usuario de Front End React / ingeniero de UX: Después de todo está dicho y hecho, estructura + orden = diversión.

Visita el blog de Paulie en: www.paulie.dev