Gatsby Workshop

GraphQL

GraphQL es una arquitectura de diseño de APIs y tiene una sintaxis particular para describir cómo consultar data que tiene 3 características principales:

• Permite al cliente especificar exactamente qué data necesita (con sintaxis parecida a un objeto JSON)
• Facilita traer data de fuentes múltiples
• Usa un sistema de tipos para describir la data

Hasta ahora todo muy de manual, pero sigamos así se entiende un poco más todo 😊

REST vs GraphQL

Veamos las diferencias que tienen GraphQL vs una API REST:

Tengan en claro que algunas cosas de esta tabla son opiniones personales, si alguien cree que las cosas no son como las digo y me puede explicar, soy todo oídos 🤗

Veamos una comparación de cómo debería traerse la data desde una API REST contra una GraphQL si estuviésemos haciendo, por ejemplo, una red social:

REST

GraphQL

Como vemos, según como está armada esta API REST, para mostrar la data de lo que sería el Home de algo similar a la red social del pajarito, tendríamos que hacer 3 peticiones para traer los datos que, utilizando GraphQL, podríamos traer en una sola petición. Ahí se nota la diferencia en cantidad de endpoints.

Todo esto que digo no es que quiera decir que GraphQL es mejor o que viene a reemplazar a REST, sino que nació con la idea de mejorar algunas falencias de REST, pero REST es mejor en otras cosas y situaciones. (cosa que no vamos a cubrir acá porque sino se hace larguísimo jajajaja 😅)

En nuestro caso, nosotros vamos a ver cómo se piden datos para utilizarlos en el frontend, podemos encontrar un ejemplo de una query (consulta) en el archivo src/components/layout.js:

const data = useStaticQuery(graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`)

Qué #$%#$ es esto, Agustin? 😒 Sí, yo sé que al principio dije que era parecida a JSON la sintaxis y esto tiene cosas que nada que ver. Por suerte, como Gatsby es re copado ya viene con una herramienta fantástica para ver toda la data que tenemos disponible para consultar mediante GraphQL. Si notaron en la consola luego de correr el comando gatsby develop, dice que si van a http://localhost:8000/__graphql se van a encontrar con GraphiQL donde vamos a ver listado del lado izquierdo en la sección _Explorer toda la data que tenemos disponible para traernos al frontend con GraphQL.

En la imagen vemos que a la izquierda nos va a aparecer toooooodo lo que tenemos disponible, no va a ser exactamente igual que en la imagen pero podemos ver cosas como allFile para consultar todos los archivos que exponemos con el plugin gatsby-source-filesystem que nos vino preinstalado, también file para consultar por cierto archivo usando filtros, allImageSharp para todas las fotos, imageSharp para una sola foto, y así... Se entiende la diferencia? 😉

Entonces si vemos nuestra query y el resultado de realizarla en el lado derecho de GraphiQL, vemos que nos traemos el título de nuestra página, pero dónde definimos nosotros eso? 🤔 Esto viene predefinido con Gatsby, y son valores que están en el archivo gatsby-config.js, donde veremos este objeto:

siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },

El cual va a tener toda la metadata de nuestro proyecto, así que esos tres valores (title, description y author) van a ser consultables tranquilamente en cualquier lugar de nuestro frontend si los requerimos! (prueben en GraphiQL si no me creen 😛) Creo que mas que seguir explicando cosas, van a aprender más si empiezan a jugar un poco con GraphiQL.

Nuestros proyectos de github todavía no los tenemos disponibles para consultar y usar en el frontend, para eso necesitamos generar la query en la configuración del plugin y ya estaría (recuerden que nuestros archivos gatsby-algo.js funcionan como nuestro backend), vamos al siguiente paso para verlo 😁