logo

¿Por qué Gatsby necesita GraphQL?

Esta publicación de blog describirá por qué Gatsby necesita GraphQL y cómo lo usa.

Si lee esta publicación, probablemente ya esté familiarizado con Gatsby (marco React para generar sitios web estáticos) y GraphQL (lenguaje de consulta para API web). Si no está familiarizado con ellos, insisto en aprenderlos primero (agregué enlaces a la documentación sobre ambas tecnologías).

Cuando decidí construir mi cartera usando Gatsby, no sabía que no era tan fácil :) Bueno, nada es fácil en un mundo tecnológico, pero aún esperaba que si es un marco y usa React, tendré mi cartera construida en poco tiempo. Bueno, no.

Parecía que por algunas razones (que desconocía al principio), Gatsby usa GraphQL para hacer consultas. Eso fue lo que me dijeron la documentación oficial y los tutoriales.
Pero aún no estaba claro POR QUÉ usa GraphQL. Así que aquí estoy tratando de explorar esta pregunta.

Cómo gestiona Gatsby los datos

El marco Gatsby está estructurado de la manera que permite crear sitios web utilizando todas las partes para eso:HTML, CSS, JavaScript y datos. Las primeras 3 partes están cubiertas por React, y los datos son el resto que vive fuera del componente React.

Es posible construir un sitio web usando solo componentes de React y todo lo que se está poniendo dentro (textos, imágenes, etc.). Pero a veces es necesario obtener datos de fuera el componente React o almacenarlo fuera y luego tráelo adentro .

La capa de datos de Gatsby permite extraer datos directamente en los componentes de las siguientes fuentes:

  • WordPress
  • sistemas de archivos (markdown, JSON, etc.)
  • CMS sin encabezado
  • Drupal
  • Netlify CMS
  • API
  • bases de datos

Gatsby y GraphQL:El mecanismo

GraphQL es un lenguaje de consulta, que Gatsby está usando para extraer datos a los componentes de React. Es absolutamente no necesario usar GraphQL para obtener los datos, hay otras formas de hacerlo. Pero debido a que GraphQL ya está configurado para el marco de Gatsby y debido a que es la misma tecnología de Facebook, se recomienda usarlo para el abastecimiento de datos.

Ahora que hemos descubierto, POR QUÉ usamos GraphQL aquí, veamos CÓMO lo usamos exactamente.

Cuando comenzamos el proyecto con Gatsby, podemos ver nuestro sitio web en localhost:8000 Puerto. Si navegamos a localhost:8000__graphQL , veremos todas las consultas disponibles para el sitio web:

Los nombres de las consultas a la izquierda son palabras clave para que Gatsby comprenda de dónde obtener datos.

Muy bien, ¡vamos a practicar! Consideremos que tenemos proyectos de Gatsby con 3 componentes de React:Diseño, Inicio y Acerca de. Ambos quieren usar el mismo title información Podemos almacenar esta información en una ubicación y hacer referencia a esa ubicación desde otros archivos.

A continuación se muestra una guía paso a paso con un ejemplo de cómo hacerlo:

1.Crear componentes de React:

src/components/layout.js 

import React from "react"
import { Link } from "gatsby"

export default function Layout({ children }) {
 return (
    <div>
      <Link to={`/`}>
        <h3> My Awesome Blog </h3>
      </Link>
      <Link to={`/about/`} > About </Link>
      {children}
    </div>
  )
}

src/páginas/index.js 

import React from "react"
import Layout from "../components/layout"

export default function Home() {
  return (
    <Layout>
      <h1>Amazing Blog which Im creating with Gatsby</h1>
      <div>
        <img
          src="#"
          alt="Group of pandas eating bamboo"
        />
      </div>
    </Layout>
  )
}

src/páginas/acerca de.js 

import React from "react"
import Layout from "../components/layout"

export default function About() {
  return (
    <Layout>
      <h1>About My Awesome Blog</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
    </Layout>
  )
}

2.Abra gatsby-config.js archivo.

El lugar para los datos comunes es el siteMetadata objeto en gatsby-config.js expediente. Agregue el título del sitio a este archivo:

module.exports = {
  siteMetadata: {
    title: "My Awesome Blog"
  },
  plugins: [],
};

3.Crea la consulta

Después de haber agregado datos a siteMetadata objeto, podemos hacer la consulta con GraphQL para extraer estos datos al componente que los necesita.

Para escribir la consulta, usaremos useStaticQuery , una nueva característica de Gatsby que brinda la capacidad de usar un React Hook para consultar con GraphQL en el momento de la compilación. Aquí debemos hacer una pausa y aprender la diferencia entre la consulta estática y la consulta de página en caso de que no estemos familiarizados con esto.

Abramos Layout.js archivo, importa GraphQL allí y crea una consulta que guardamos en data variable:

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"

export default function Layout({ children }) {

const data = useStaticQuery(
    graphql`
      query {
        site {  
          siteMetadata {
            title
          }
        }
      }
    `
 return (
    <div>
      <Link to={`/`}>
        <h3> My Awesome Blog </h3>
      </Link>
      <Link to={`/about/`} > About </Link>
      {children}
    </div>
  )
}

4.Utilice los datos dentro del componente

Hemos creado una variable data y guardó el resultado de la consulta en él. La palabra clave site en los puntos de consulta Gatsby dónde buscar los datos durante la compilación. Gatsby ve sitio palabra clave, va a gatsby-config.js , encuentra el objeto siteMetadata , saca title y lo almacena en la variable data .

Ahora todo lo que tenemos que hacer es usar data donde lo queramos (en nuestro caso, en lugar de h3 codificado etiqueta:

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"

export default function Layout({ children }) {

const data = useStaticQuery(
    graphql`
      query {
        site {  
          siteMetadata {
            title
          }
        }
      }
    `
 return (
    <div>
      <Link to={`/`}>
        <h3> {data.site.siteMetadata.title} </h3>
      </Link>
      <Link to={`/about/`} > About </Link>
      {children}
    </div>
  )
}

Desde nuestro Home y About los componentes están envueltos con Layout componente, el título aparecerá en cada uno de ellos.
Si decidimos cambiar el título, todo lo que tenemos que hacer es cambiar siteMetadata propiedad de objeto title .

Ciertamente no se requiere GraphQL, pero los beneficios de adoptar GraphQL son significativos. GraphQL simplificará el proceso de creación y optimización de páginas, por lo que se considera una práctica recomendada para estructurar y escribir aplicaciones Gatsby.

Gracias por leer mi blog. Siéntete libre de conectarte en LinkedIn o Twitter :)