Cómo usar Airtable con Gatsby

Descubrí Airtable a finales de 2018 y me quedé impresionado de inmediato. Para aquellos que aún no lo conocen, Airtable es una aplicación híbrida de hoja de cálculo y base de datos colaborativa basada en la nube. Ofrece una interfaz gráfica de usuario flexible e intuitiva, precios razonables (junto con un generoso nivel gratuito) y una API REST completa con excelente documentación generada automáticamente. También funciona muy bien como fuente de datos para Gatsby.js, ¡y estoy ansioso por mostrarles cómo!

En esta lección, crearemos un menú básico para un food truck con Airtable y luego lo mostraremos (casi) sin esfuerzo en un sitio web de Gatsby. Este artículo asume que ya tienes configurado un proyecto básico de Gatsby.js y que estás listo para editar. Si necesitas ayuda para llegar a ese punto, intenta leer la publicación Tus primeros pasos con Gatsby v2 y luego vuelve aquí.

Configuración de Airtable

Dado que este artículo se centra más en Gatsby, solo cubriremos los pasos generales relacionados con Airtable. Verás rápidamente que la interfaz de usuario de Airtable es muy intuitiva y que la documentación generada automáticamente es de primera categoría cuando es necesaria. Sin embargo, te animo a que te tomes una tarde tranquila para explorar las características y funcionalidades disponibles, ya que descubrirás lo potente y flexible que puede ser. (Lo uso en varios proyectos personales y para clientes, ¡y no solo con Gatsby!)

1. Crea una cuenta de Airtable

Lo primero que tenemos que hacer es crear una cuenta de Airtable, a menos que ya tengas una. Solo tienes que ir al sitio web de Airtable y hacer clic en el enlace "Registrarse" en la barra de navegación principal.

Una vez que te hayas registrado (o hayas iniciado sesión), estarás en el panel principal. Inicialmente, se te proporciona una única base de datos workspace, que contiene una colección de demostraciones bases(también conocidas como bases de datos). Cada base puede contener cualquier cantidad de tablas, que funcionan como tablas de bases de datos.

Los espacios de trabajo y las bases se pueden crear libremente, así que siéntete libre de crear un nuevo espacio de trabajo vacío aquí si lo deseas. (Esto es recomendable, pero no obligatorio).

2. Crea una nueva base

Para el menú de nuestro food truck, necesitamos crear una nueva base. Para ello, haga clic en el botón gris "Agregar una base" dentro del espacio de trabajo que elija.

Selecciona la opción “empezar desde cero” cuando se te solicite y luego, en la ventana emergente, le daremos un título a nuestra nueva base. (También puedes asignar un color y un glifo para el ícono, si lo deseas). Vamos a nombrar la nuestra ChompsFoodTruck.

Consejo profesional: al trabajar con proyectos de clientes en Airtable,siempreCrea un nuevo espacio de trabajo para cada cliente. La propiedad de las bases no se puede transferir, pero sí la propiedad de los espacios de trabajo.

3. Cambie el nombre de la tabla predeterminada

Con nuestra nueva base inicializada, hacemos clic en su icono para comenzar a configurarla.

Notarás que la pestaña en la parte superior tiene la etiqueta Table 1, por lo que deberíamos cambiarle el nombre por algo más apropiado. Cámbiale el nombre a Sandwichespara nuestros propósitos.

Dado que hacemos referencia a este nombre de tabla en Gatsby, recomiendo usar el sistema de nombres camelCase o PascalCase si el nombre de su tabla necesita varias palabras, por ejemplo:SoupsAndSalads

4. Editar la tabla

Editemos la Sandwichesestructura de la tabla para adaptarla a nuestras necesidades:

• Paso 1:NotesEliminar las columnas y predeterminadas Attachments.
• Paso 2:Cree dos nuevas columnas, Description(tipo: Texto de una sola línea) y Price(tipo: Moneda)
• Paso 3:¡Agregue algunas filas de datos de muestra! Utilice sus sándwiches favoritos e invente un precio y una descripción para cada uno.

Una vez superados estos pasos, tenemos una Sandwichesmesa sencilla preparada en nuestra ChompsFoodTruckbase. Podríamos duplicarla fácilmente para crear otras secciones del menú, como guarniciones o bebidas, pero lo haremos de forma sencilla para esta lección.

5. Credenciales de la API de Airtable

Solo nos queda un paso en Airtable: obtener nuestras credenciales de API. Para realizar llamadas a la API de Airtable se requieren tanto un base IDcomo un API Key.

Para obtener el ID de base, haga clic en el Helpenlace que se encuentra junto a su perfil (arriba a la derecha) y luego haga clic API documentationen el menú desplegable. Esto generará automáticamente documentación nueva para nuestra ChompsFoodTruckbase en una nueva pestaña del navegador. Luego haga clic en el Sandwichesenlace del menú y en el código de ejemplo (JavaScript) a la derecha verá el ID de base:

var base = new Airtable({apiKey: 'YOUR_API_KEY'})                .base('appABCD12345'); //   nice!

Para obtener tu clave API, solo tienes que dirigirte a la página de descripción general de tu cuenta. Allí verás un botón para (re)generar una nueva clave.

¡Nuestra configuración de Airtable está completa! (¡Y esa documentación generada automáticamente fue genial, ¿verdad?!) Volvamos a nuestro proyecto Gatsby, donde traeremos estos datos sin casi ningún esfuerzo.

Incorporando los datos a Gatsby

Podríamos escribir algo de código usando los ejemplos de código proporcionados por la documentación de Airtable y no es difícil trabajar con ellos. Sin embargo, dado que estamos usando Gatsby, essiempreSería una buena idea buscar en la sección de complementos del sitio oficial algo que pueda ayudar.

Afortunadamente, existe un excelente complemento gatsby-source-airtable que podemos usar. Este complemento puede obtener filas de datos de varias bases y tablas en Airtable, y las convierte automáticamente en nodos GraphQL.

1. Instalación

Lo primero que tenemos que hacer es instalar el gatsby-source-airtablecomplemento. Detendremos nuestro servidor de desarrollo si está en ejecución y, luego, en el símbolo del sistema:

$ yarn add gatsby-source-airtable

2. Configuración del complemento

Al igual que con todos los complementos de Gatsby, también debemos incluirlo gatsby-config.jsy configurar algunas opciones. Hagámoslo ahora insertándolo en la pluginsmatriz, como se muestra aquí:

gatsby-config.js

// ... siteMetadata above hereplugins: [  {    resolve: `gatsby-source-airtable`,    options: {      apiKey: `YOUR_AIRTABLE_API_KEY`,      tables: [        {          baseId: `AIRTABLE_BASE_ID`,          tableName: `Sandwiches`        },        // We can add other bases/tables here, too!        //{          //baseId: `AIRTABLE_BASE_ID`,          //tableName: `Sides`        //}      ]    }  },  // ... other plugins here]

Esta es la configuración mínima y es todo lo que necesitamos para recuperar nuestros datos de sandwich. Asegurémonos de que funcione reiniciando nuestro servidor de desarrollo y luego abriendo GraphiQL en una pestaña del navegador. (Normalmente, esta URL es: http://localhost:8000/___graphql)

Deberías ver dos nuevas entradas en la parte superior del Explorermenú de la izquierda: airtabley allAirtable. Si consultas los datos en allAirtable.nodes, deberías ver todos los datos de tu sándwich enumerados. ¡Genial!

3. Visualización de nuestros datos

En este punto, ya tenemos configurada nuestra base de Airtable y los datos en los nodos GraphQL ya están disponibles para Gatsby. ¡Todo lo que queda por hacer es consultarlos y mostrarlos en nuestro sitio! Sin duda, podríamos hacerlo mediante una consulta a nivel de página, pero para lograr la máxima portabilidad, crearemos un nuevo Menucomponente y utilizaremos una consulta estática dentro de él.

Creemos un nuevo archivo en /src/components/Menu.jsy agreguemos el siguiente código:

/src/componentes/Menu.js

import React from 'react';import { useStaticQuery, graphql } from 'gatsby';const Menu = () = {  const data = useStaticQuery(graphql`    query MenuQuery {      sandwiches: allAirtable(        filter: { table: { eq: "Sandwiches" } }        sort: { fields: data___Price, order: DESC }      ) {        nodes {          data {            Name            Price            Description          }          recordId        }      }    }  `);  return (    div      h3Sandwiches/h3      ul        {data.sandwiches.nodes.map((item, i) = (          li key={item.recordId}            p              {item.data.Name}, ${item.data.Price}            /p            p{item.data.Description}/p          /li        ))}      /ul    /div  );};export default Menu;

Como puedes ver, solo estamos mapeando nuestros datos de sándwich y devolviendo lielementos. Ten en cuenta que estamos haciendo uso de una característica más nueva de Gatsby, useStaticQuery, que utiliza un React Hook integrado para permitir consultas GraphQL dentro de cualquier componente en el momento de la compilación.

Importante: Esta función requiere Gatsby versión 2.1.0 o superior, y React 16.8.0 o superior.

Observe también que estamos utilizando una filteropción en la consulta para asegurarnos de que solo recuperamos datos de la Sandwichestabla. (De esta manera, podríamos crear consultas adicionales si tuviéramos otras secciones de menú).

¡Eso es todo! Ahora podemos usar nuestro nuevo Menucomponente en cualquier parte de nuestro proyecto, como cualquier otro componente. (¡Aunque recomiendo darle estilo!)

Otras opciones de configuración del complemento

Ya hemos utilizado las dos opciones obligatoriastables dentro de cada objeto, baseIdy tableName, y no es necesario explicarlas demasiado. Pero hay otras opciones útiles disponibles dentro de cada tablesobjeto:

• Vista de tabla:(Cadena) Esta opción le permite utilizar una vista personalizada que haya configurado dentro de Airtable. (por ejemplo, para un ordenamiento y/o filtrado de filas altamente personalizado que haya realizado en el lado de Airtable).
• consultaNombre:(Cadena) A veces, puede que estés usando dos bases que tienen tablas con los mismos nombres. Con esta opción, puedes establecer un nombre alternativo para una tabla para que sea más fácil trabajar con consultas GraphQL.
• cartografía:(Objeto) Esta opción le permite asignar columnas a tipos de datos específicos para que Gatsby los transforme. ¡Es muy útil para usar con datos de Markdown o con archivos adjuntos de imágenes!
• Enlaces de la tabla:(Matriz de cadenas) Airtable ofrece un tipo de columna especial que se vincula a las entradas de otras tablas. Con esta opción, definimos estos nombres de columna para asegurarnos de que Gatsby recupere los datos completos. (De lo contrario, solo obtendrá el ID de cada elemento vinculado).

La documentación del complemento brinda más detalles sobre estas opciones, y hay algunos ejemplos de uso fantásticos disponibles en el repositorio de Github del complemento, incluidos ejemplos de procesamiento de imágenes y procesamiento de rebajas.

Conclusión

Este ejemplo de menú era algo básico, pero espero que hayas visto que Airtable y Gatsby.js forman un dúo increíble, especialmente con la ayuda del complemento gatsby-source-airtable. ¡Pero no te detengas aquí! Definitivamente te aliento a que explores y experimentes más con las características de Airtable por tu cuenta. Posibles ideas:

• Intente agregar nuevas tablas con otras secciones de menú, por ejemplo Nachos, y Drinks.
• Intente crear una Infotabla para almacenar el correo electrónico, el número de teléfono, el logotipo, etc. del food truck.
• Intente agregar imágenes para los elementos de su menú y luego utilice el fantástico Imagecomponente de Gatsby para mostrarlos.

¡Feliz aprendizaje y buen provecho!