Gatsby Workshop

Workshop - Paso 2

Bueno, ya aprendimos aunque sea lo básico para poder consultar data en GraphQL, ahora les tengo que dar una mala noticia, todo eso ~~no sirvió para nada~~ nos sirve un montón! 🤣 Nah, la mala noticia es que vamos a tener que usar una versión de GraphiQL vieja en la página de Github que no tiene el Explorer de la izquierda que tenemos con Gatsby que es SUPER UTIL y ayuda un montón.

Vamos a la API GraphQL de Github!

Esto es un poco más complicado pero si hacemos click arriba a la derecha en Docs, vamos a ver un poco de info sobre qué estamos consultando. Si borramos viewer y login (y sus respectivas llaves) podemos ver lo que nos sugiere GraphiQL si empezamos a tipear. O sino tenemos la docu de la API GraphQL de Github, pero mejor pensemos juntos y vamos viendo qué estamos necesitando.

La data que traigamos con la query que hagamos acá, es la data que después vamos a tener disponible en nuestro backend (creo que ya lo dije, no? jaja), así que veamos, nosotros necesitamos traer nuestros repos, entonces escribamos eso en nuestra query:

BUENO ESO DE LOS REPOS ERA MENTIRA, borren eso y como dije antes, lean la documentación de todo lo que usen. 😂

Por practicidad y para no hacerles perder el tiempo, hagamos bien la query. Nosotros sí necesitamos los repos, pero de cierto usuario (el nuestro), así que borremos "repos" y escribamos "user", lo cual nos va a sugerir un dato de ese tipo, cliqueemos para seleccionarlo. Ahora posicionemos nuestro puntero del mouse sobre user un par de segundos y veremos que nos aparece un cartel explicando el tipo de dato que estamos consultando, hagamos click en el "user" azul, lo cual nos despliega la documentación sobre ese dato.

Ahí a la derecha vemos los argumentos que acepta este dato, que sería login: String!. Esto nos indica que vamos a tener que indicar un String con clave login y el signo de exclamación ! indica que este valor es requerido, así que nos debería quedar algo así:

query {
  user (login: "agustinmulet") {
    //Acá seguimos
  }
}

Obviamente pongan entre comillas su usuario 😜 sigamos, ya sabemos que vamos a recibir algo de cierto user, necesitamos ahora sí que sean los repos! Escribamos "repos" ahora en serio 🤣. Esto nos va a sugerir, entre otras cosas, repository y repositories, si necesitamos los repositorios, cuál les parece que vamos a necesitar? 😉

Si hacemos lo mismo que con user antes, podemos ver los argumentos que podemos usar con lo que nos estamos trayendo. Si eligieron bien, deberíamos ver varios como privacy, orderBy, affiliations, etc. No sé a ustedes, pero a mi me gustó que esté primero privacy, ya que nosotros solamente vamos a querer mostrar nuestros repos públicos, así que agreguemos ese filtro, escribamos (privacy: ) y les cuento un truquito: aprieten Ctrl + barra espaciadora y les va a sugerir los distintos tipos de repos que acepta privacy, esto nos va a simplificar el laburo 😄

Si hicimos todo bien, presionando Ctrl + barra adentro deberíamos tener algo así:

KESESO? edges, nodes, whaaattt??? Bueno, acá les voy a explicar algo como yo lo entiendo y como me viene funcionando: cuando queremos traernos una colección de cosas, en este caso de nuestros repositorios, edges representa la colección o el array y dentro de edges, un dato llamado node va a representar cada objeto dentro de esa colección o array. Se entiende? Quizás cuesta un poco al principio pero cuanto más usemos GraphQL más se afianzan todos estos conceptos.

Ahora bien, nosotros necesitamos ese array, así que vayamos con los edges y dentro consultemos por cada node, que representa cada uno de nuestros repos 😎 ya casi estamos, no me odien jaja. Si hacemos Ctrl + barra vemos un montó´´oóóóón de datos que podemos traer de cada repo, elijan los que les parezcan más útiles de mostrar! Ahora denle al botoncito de "Play" de arriba y... Momento, esto tira error, Agustin ahora sí te odio 🤬🤬😡 Pero 😢 lean mejor el mensaje de error que les dice GraphiQL! Falta proveer un dato first o last a los repositories, hagamos eso, sumemos al lado de privacy y pongamos por ejemplo first: 50 (no sé ustedes pero yo no tengo más de 15-20 repos en mi cuenta) Demos "Play" de nuevo y veremos nuestros hermosos repos en cualquier orden 🤣 Podemos ordenarlos con el filtro orderBy, pero ya les dejo a ustedes que ordenen como les guste 😀 Les dejo cómo hice yo mi query y cómo debería quedar el gatsby-config.js acá abajo 👇

Para ver la solución hacé click en la pestaña 👆

graphQLQuery: `query {
  user (login:"agustinmulet"){
  repositories(first:50,orderBy:{field:STARGAZERS, direction:DESC},privacy:PUBLIC){
    edges {
      node {
        id
        name
        description
        isPrivate
        url
      	}
    	}
  	}
  }
}`,

Ahora, como modificamos uno de los archivos de Gatsby, debemos frenar el servidor local haciendo Ctrl + C y volver a levantarlo corriendo gatsby develop. Vayamos a GraphiQL en http://localhost:8000/___graphql y si vemos a la izquierda, veremos que tenemos algo nuevo para consultar: allGithubData y githubData! 😃 Genial, ahora les dejo armar la query para usar en el frontend, les dejo como tip que usen githubData y no la que sería all ya que esa sería por si traemos cosas de varios usuarios, nosotros tenemos uno, así que nos alcanza con consultar la data de githubData nomás. Otra cosa a tener en cuenta: las queries pueden tener nombre o no, query Nombre {}, lo que sí, hay que tener en cuenta que esos nombres no se pueden repetir en nuestro proyecto.

Bueno, con el ejemplo del uso de query + uso de datos en el front en el componente layout.js, les dejo pensar y hacer la query de nuestros repos y mostrar esa data. Pueden hacer un componente nuevo si quieren, o en una page, lo que más les guste. Les dejo mi componente acá 👇 y pasamos a la siguiente parte.

Para ver la solución hacé click en la pestaña 👆

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

const MisRepos = () => {
  const repos = useStaticQuery(graphql`
    query MisReposQuery {
      githubData {
        data {
          user {
            repositories {
              edges {
                node {
                  description
                  id
                  isPrivate
                  name
                  url
                }
              }
            }
          }
        }
      }
    }
  `)
  console.log(repos.githubData.data.user.repositories.edges)
  return (
    <table>
      <thead>
        <tr>
          <th>repo.id</th>
          <th>repo.name</th>
          <th>repo.isPrivate</th>
          <th>repo.url</th>
          <th>repo.description</th>
        </tr>
      </thead>
      <tbody>
        {repos.githubData.data.user.repositories.edges.map(({ node }) => (
          <tr key={node.id}>
            <td>{node.id}</td>
            <td>{node.name}</td>
            <td>{node.isPrivate ? 'Privado' : 'Público'}</td>
            <td>{node.url}</td>
            <td>{node.description}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export default MisRepos

Subiendo nuestro proyecto a Netlify

Gatsby + Netlify = 💝💞

Bueno, como hablamos de la privacidad, antes de subir nuestro proyecto a cualquier lado, estaría bueno preservar nuestra key de Github así no viene cualquiera y lo usa para cualquier cosa. Usemos entonces variables de entorno 😉 Empecemos por crear un archivo que se llame .env.development (sí, empieza con punto) en la raíz de nuestro proyecto (a la misma altura que los archivos gatsby-algo.js) y luego agreguémoslo en nuestro archivo .gitignore así nos aseguramos que no subimos ese archivo a nuestro Github. Adentro de este archivo .env.development vamos a generar una variable de entorno que su nombre DEBE EMPEZAR con GATSBY_, por ejemplo:

GATSBY_GH_KEY=079b55830a613c38aff7f4608ef2448d83db9758

Guardamos y Gatsby como con muchas cosas, ya tiene dotenv preconfigurado, así que para poder acceder a nuestro archivo recién generado y a la variable de entorno agreguemos en nuestro archivo gatsby-config.js lo siguiente:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

Y luego en el mismo archivo podemos modificar la configuración del token de nuestro plugin de Github por esto:

token: process.env.GATSBY_GH_KEY,

Et voilà! Si bajamos el servidor de desarrollo y lo volvemos a levantar, debería seguir funcionando todo normalmente. Ahora nos resta subir nuestro proyecto a Github con nuestra key guardadita y a salvo, para eso comencemos por entrar a nuestro usuario de Github, a la parte de repositorios y creemos uno nuevo con el botón verde New que está a la derecha, o entrando en este link. Luego escribimos un nombre para nuestro repositorio (por ejemplo "MiPortfolio") y no hace falta que pongamos descripción ni que lo inicialicemos con un README. Vamos al botón de abajo de todo y terminamos de crear nuestro repositorio. Se nos va a crear un repositorio vacío y el mismo Github que es re copado nos va a decir cómo subir nuestro proyecto donde dice …or push an existing repository from the command line. Entonces abrimos una terminal y vamos hasta la carpeta raíz de nuestra app, luego ahí hacemos lo que nos dice Github:

git remote add origin https://github.com/agustinmulet/MiPortfolio.git
git push -u origin master

Es probable que nos pida nuestro usuario y constraseña de Github, en ese caso ingresamos nuestras credenciales y si todo salió bien, ya tenemos nuestra app subida a un repo propio!

Ahora resta hacernos una cuenta en Netlify para subir nuestro proyecto, para hacerlo hay que entrar con nuestro usuario a Netlify, hacer click en el botón verde de arriba a la derecha que dice New site from Git e indicarle cuál es el repositorio con nuestra app (MiPortfolio si le pusieron el mismo nombre que yo), aceptamos y continuamos con las configuraciones que detecta automáticamente Netlify (sí, es re copado e inteligente), esperamos un poco que haga el deploy y ya (casi) está! Lo que sí, Netlify nos da un nombre raro para nuestro sitio, así que para cambiar el nombre al que querramos (nombredeapp.netlify.com), tenemos que (si es que estamos en el Dashboard principal de Netlify) hacer click en nuestra app recién subida con nombre raro, hacer click en el botón ⚙ Site Settings y en la parte de Site Information vamos a ver otro botón Change site name, donde podemos definir el nombre que querramos. Es probable que algún nombre como MiPortfolio esté utilizado, pero podemos inventar algo usando nuestro nombre, o algún nombre raro que se les ocurra (elmejorportfolio, wowsomuchportfolio, lamejorwebamiguis, loquesea jaja).

Es probable que nuestro deploy falle, porque nuestra variable de entorno no existe. Vamos entonces a agregar nuestra variable de entorno en Netlify. Para esto volvemos a ⚙ Site Settings de nuestro proyecto y ahí dentro a Build & deploy, Environment y creamos una nueva haciendo click en el botón Edit variables. Nos pide Clave / Valor, por practicidad vamos a poner como clave el nombre que venimos usando GATSBY_GH_KEYy como valor ponemos nuestra API key 079b55830a613c38aff7f4608ef2448d83db9758 todo así sin comillas, solamente el texto.

Guardamos y es posible que tengamos que repetir el tema del deploy, pero es la forma que conozco de hacerlo funcionar... Para repetir el deploy, vamos al menú Deploys y a la derecha vemos un dropdown que dice Trigger deploy, hacemos click ahí y luego en Deploy site. Esperamos un rato y deberíamos tener todo subido y funcionando 😎

Ahora resta ponerlo lindo usando css, mostrando todo en cards, imágenes, lo que les parezca, eso se los dejo a ustedes!

Y si todavía andás con tiempo y ganas, seguí avanzando y hacemos el blog! 😉😉😉

ATRÁS GraphQL PRÓX Workshop - Paso 3