Uso de GraphQL Playground con Gatsby | Programar Plus

Supongo que la mayoría de ustedes ya han oído hablar de Gatsby, y al menos saben que es básicamente un generador de sitios estáticos para sitios React. Generalmente funciona así:

  1. Fuentes de datos → Extrae datos de cualquier parte.
  2. Construir → Genera tu sitio web con React y GraphQL.
  3. Desplegar → Envía el sitio a cualquier host de sitio estático.

Lo que esto generalmente significa es que puede obtener sus datos de cualquier fuente de datos reconocible (CMS, Markdown, sistemas de archivos y bases de datos, por nombrar algunos), administrar los datos a través de GraphQL para construir su sitio web y finalmente implementar su sitio web en cualquier sitio web estático. host (como Netlify o Zeit).

Captura de pantalla de la página de inicio de Gatsby.  Muestra los tres pasos diferentes del proceso de compilación de Gatsby y muestra cómo se construyen y luego se implementan las fuentes de datos.La ilustración de la página de inicio de Gatsby del flujo de trabajo de Gatsby.

En este artículo, nos ocupamos del proceso de compilación, que funciona con GraphQL. Esta es la parte donde se gestionan sus datos. A diferencia de las API REST tradicionales, en las que a menudo necesita enviar datos anónimos para probar sus terminales, GraphQL consolida sus API en un IDE autodocumentado. Con este IDE, puede realizar operaciones de GraphQL, como consultas, mutaciones y suscripciones, así como ver su esquema y documentación de GraphQL.

GraphQL tiene un IDE incorporado, pero ¿y si queremos algo un poco más potente? Ahí es donde entra en juego GraphQL Playground y vamos a seguir los pasos para cambiar del valor predeterminado a GraphQL Playground para que funcione con Gatsby.

Área de juegos GraphiQL y GraphQL

GraphiQL es el IDE predeterminado de GraphQL para explorar las operaciones de GraphQL, pero puede cambiar a otra cosa, como GraphQL Playground. Ambos tienen sus ventajas. Por ejemplo, GraphQL Playground es esencialmente un envoltorio sobre GraphiQL pero incluye características adicionales como:

  • Documentación de esquema interactiva de varias columnas
  • Recarga automática de esquemas
  • Soporte para suscripciones de GraphQL
  • Historial de consultas
  • Configuración de cabeceras HTTP
  • Pestañas
  • Extensibilidad (temas, etc.)

La elección de GraphQL Playground o GraphiQL probablemente depende de si necesita usar esas funciones adicionales. No existe una regla estricta que le haga escribir mejores operaciones de GraphQL o crear un mejor sitio web o aplicación.

Esta publicación no pretende influir en uno contra el otro. Estamos analizando GraphQL Playground en esta publicación específicamente porque no es el IDE predeterminado y puede haber casos de uso en los que necesite las funciones adicionales que proporciona y necesita configurar las cosas para que funcionen con Gatsby. Entonces, profundicemos y configuremos un nuevo proyecto de Gatsby desde cero. Integraremos GraphQL Playground y lo configuraremos para el proyecto.

Configuración de un proyecto Gatsby

Para configurar un nuevo proyecto de Gatsby, primero debemos instalar el gatsby-cli. Esto nos dará comandos específicos de Gatsby que podemos usar en la Terminal.

npm install -g gatsby-cli

Ahora, configuremos un nuevo sitio. He decidido llamar a este ejemplo “gatsby-playground” pero puedes nombrarlo como quieras.

gatsby new gatsby-playground

Naveguemos hasta el directorio donde se instaló.

cd gatsby-playground

Y, finalmente, encienda nuestro servidor de desarrollo.

gatsby develop

Dirigirse a http://localhost:8000 en el navegador para la página de inicio del proyecto. Tus operaciones de Gatsby GraphQL estarán ubicadas en http://localhost:8000/___graphql.

Captura de pantalla de la página de inicio de un nuevo proyecto de Gatsby.  Dice Bienvenido a su nuevo sitio web de Gatsby.  Ahora ve a construir algo grandioso.
La interfaz GraphiQL.  Hay cuatro paneles de izquierda a derecha que muestran el explorador, las variables de consulta y la documentación.La interfaz GraphiQL.

En este punto, creo que vale la pena señalar que existe una aplicación de escritorio para GraphQL Playground. Simplemente podría acceder a sus operaciones de Gatsby GraphQL con el URL Endpoint localhost:8000/___graphql sin ir más lejos con este artículo. ¡Pero queremos ensuciarnos las manos y divertirnos bajo el capó!

Captura de pantalla de la interfaz GraphQL Playground.  Tiene dos paneles que muestran las operaciones de Gatsby GraphQL.GraphQL Playground ejecutando Gatsby GraphQL Operations.

Variables ambientales de Gatsby

¿Todavía cerca? Frio. Hacia adelante.

Dado que no vamos a depender de la aplicación de escritorio, tendremos que hacer un poco de configuración de variables ambientales.

Las variables ambientales son variables que se utilizan específicamente para personalizar el comportamiento de un sitio web en diferentes entornos. Estos entornos pueden ser cuando el sitio web está en desarrollo activo, o quizás cuando está en producción y disponible para que el mundo lo vea. Podemos tener tantos entornos como queramos, y definir diferentes Variables Ambientales para cada uno de los entornos.

Obtenga más información sobre las variables ambientales en Gatsby.

Gatsby admite dos entornos: desarrollo y producción. Para establecer una variable ambiental de desarrollo, necesitamos tener un .env.development archivo en la raíz del proyecto. El mismo tipo de trato para la producción, pero es .env.production.

Para intercambiar ambos entornos, necesitaremos configurar una variable de entorno de manera compatible entre plataformas. Vamos a crear un .env.development archivo en la raíz del proyecto. Aquí, establecemos un par clave/valor para nuestras variables. la clave sera GATSBY_GRAPHQL_IDE, y el valor será playground, al igual que:

GATSBY_GRAPHQL_IDE=playground

Acceso a variables de entorno en JavaScript

En Gatsby, nuestras variables ambientales solo están disponibles en el momento de la compilación o cuando se está ejecutando Node.JS (lo que llamaremos tiempo de ejecución). Dado que las variables se cargan del lado del cliente en el momento de la compilación, debemos usarlas dinámicamente en el momento de la ejecución. Es importante que reiniciemos nuestro servidor o reconstruyamos nuestro sitio web cada vez que modifiquemos alguna de estas variables.

Para cargar nuestras variables ambientales en nuestro proyecto, necesitamos instalar un paquete:

yarn add env-cmd --dev // npm install --save-dev env-cmd

Con eso, cambiaremos el script de desarrollo en package.json como paso final, a esto en su lugar:

"develop": "env-cmd --file .env.development --fallback gatsby develop"

El script de desarrollo instruye al env-cmd paquete para cargar variables ambientales desde un archivo de variables ambientales personalizado (.env.development en este caso), y si no puede encontrarlo, recurra a .env (si tiene uno, así que si ve la necesidad de hacerlo, cree un .env archivo en la raíz de su proyecto con el mismo contenido que .env.development).

¡Y eso es! Pero bueno, recuerda reiniciar el servidor ya que cambiamos la variable.

yarn start // npm run develop

Si actualizas el http://localhost:8000/___graphql en el navegador, ahora debería ver GraphQL playground. ¿Frio? ¡Frio!

GraphQL Playground con Gatsby.

¡Y así es como logramos que GraphQL Playground funcione con Gatsby!

Así es como pasamos del GraphiQL IDE predeterminado de GraphQL a GraphQL Playground. Como mencionamos anteriormente, la decisión de hacer o no el cambio se reduce a si las funciones adicionales que se ofrecen en GraphQL Playground son necesarias para su proyecto. Una vez más, básicamente estamos trabajando con un envoltorio GraphiQL que acumula más funciones.

Recursos

Aquí hay algunos artículos adicionales en la web para que pueda comenzar con Gatsby y familiarizarse más con GraphiQL, GraphQL Playground y Variables de entorno.

  • Gatsby JS – El gran campo de entrenamiento de Gatsby
  • Impresionantes recursos de Gatsby
  • Presentamos GraphiQL
  • Variables ambientales en GraphQL
  • Uso de GraphQL Playground con Gatsby
  • env-cmd
(Visited 2 times, 1 visits today)