Pues bienvenido al segundo vídeo de la introducción a GraphQL con el gran Horacio Herrera.
Estoy encantado, todo un experto.
¿Qué nos toca ahora en el segundo vídeo?
Ahora vamos a ver cómo hacer una query, cómo utilizar una API GraphQL con la API de Rick & Morty.
Pues ya sabes, ahora mismo.
La API de Rick & Morty
No la conocía, pero justamente me ha comentado Horacio.
Es que es muy guay porque tienes la versión REST y tienes la versión GraphQL.
Y esto está súper interesante porque así podéis probar las dos.
Aquí tendréis la REST y la GraphQL.
Entonces para GraphQL ya nos da aquí una URL que vamos a entrar exactamente.
Sí, eso es.
Ahí vemos que Rick & Morty API.com barra GraphQL.
Esto es una convención que se utiliza mucho porque en GraphQL no tienes N endpoints como en REST.
Tienes solo uno y allí pides toda la información.
Entonces esto es una convención.
Tú puedes ponerle el nombre que quieras, pero normalmente y habitualmente se hace esto.
Que tampoco me imagino esto, no lo sé.
Ya os digo, yo no soy el experto, ¿eh?
Así que lo que diga Horacio va a misa.
Ahora, ¿supongo que no se suele dejar abierto esta posibilidad de ver el Playground?
No.
No creo, ¿no?
No, habitualmente no.
O para APIs públicas.
Exactamente.
Para APIs públicas como esta sí, pero obviamente para una empresa privada esto lo tienes en staging.
Es más, esto ni siquiera lo conectas a una API de producción habitualmente.
Esto solamente lo expones para tu equipo.
O sea, facebook.com barra GraphQL no funciona.
No, no va a funcionar.
Bueno, a ver, sí lo puedes ver, pero no creo que funcione tan fácil.
No.
Aparte también, luego te pasaré el link porque hay una herramienta que te deja poner esta URL.
No una web, sino que hay una aplicación que te deja consumir APIs GraphQL.
Si están abiertas, tienes ya un GraphQL as a service, digamos, que lo tienes ahí.
Interesante.
Guay.
Pues estamos aquí en el Playground de Rick and Morty API.
Esto parece que está todo vacío.
Eso es.
A la izquierda, digamos, que es donde vamos a crear la query, a la derecha donde vamos a ver los resultados.
Yo me encuentro aquí, Horacio, digo, ¿y yo por dónde empiezo?
Muy bien, como hemos dicho antes, estamos siguiendo, tanto esta herramienta como el frontend, como todo, seguimos un esquema.
Entonces, vamos a ver el esquema primero.
Si ves ahí a la derecha, tienes este panelcito y aquí te explica todo el esquema que tienes definido en esta API.
Esta herramienta, hay un, luego lo podemos ver también, hay un endpoint que te da este, bueno, un endpoint, no, es que no es un endpoint, es un, una, una query que te da toda la definición que tú tienes en la API.
Y este panelcito lo consume.
Entonces, si tú vas clicando, tú puedes ver todo lo que puedes hacer en la API, lo que tienes que pasarle, si es requerido o no, si hay algún tipo y qué tipos son la información que vas a recibir o que vas a consumir.
A ver, por ejemplo, carácter.
Aquí nos dice, tendríamos aquí el parámetro ID, que es del tipo ID, y luego nos diría que aquí está como la información del objeto que podríamos recuperar, que es el ID.
Si subes un poco, aquí se ve que este carácter es una query que le tienes que pasar un ID para poder que recibas, en los cuales son los dos puntos, recibes un tipo carácter.
Entonces, abajo ves los details de lo que puedes recibir.
Vale, que tendríamos ID del tipo ID, name, que es un string, status string.
Está muy bien porque, fíjate que tenemos ya aquí como una documentación viva de lo que podemos esperar, ¿no?
Exactamente.
Y aquí tendríamos el argumento.
Si vamos a species string, además nos tenemos aquí como, bueno, aquí solo nos dice lo que es un string.
Claro.
Sí, porque, bueno, esto también es importante mencionarlo, que ya GraphQL, en la misma definición del server, viene con unos tipos ya definidos que se le llaman scalar types.
Son el string, el ID, el boolean y un poco más, unos cuantos más.
Veo aquí que hay uno que es location, por lo tanto entiendo que puedes crear tus propios tipos.
Así mismo.
Claro, o sea, el type carácter ya es un tipo que podría utilizar en otro tipo, ¿no?
Sí, sí.
Ah, interesante.
O sea, puedes crearte los tipos que quieras, puedes crearte las mutaciones que quieras y todo.
Pero viene ya con algunos que son los básicos.
Claro, que son los más básicos.
Digamos que son como los nativos.
Sí.
Vale, pues tenemos carácter, carácters, pues, ¿te parece?
Carácter, ¿cómo es una lista?
Eso es.
Yo creo que empecemos con una lista porque de allí podemos sacar la información para hacer una sola.
Exacto, vale.
Entonces, lo primero que hace, abre corchetes.
Abro corchetes.
Eso es.
Y allí, lo que, obviamente no tienes ninguna ayuda, pero si clicas, creo que es, si presionas comando o espacio.
Pero es control espacio.
Control espacio.
Aquí ves que, como no hemos definido ninguna palabra al inicio de estos brackets, ya entiende que lo que quieres hacer es una query.
Una query.
Quieres pedir información.
Entonces, aquí te da todo lo que puedes hacer query.
Hacia todo lo que puedes hacer query.
Que son justamente las que hemos visto antes.
Que es justamente lo que puedes hacer.
Tenemos todas las queries, carácter, carácter, bla, bla, bla.
Todas estas son las que me acaban de aparecer.
Claro, en esta API, obviamente, como es abierta, solamente tenemos queries.
No podemos hacer mutaciones.
Mutaciones, vale.
Pero aquí podemos hacer una query de, por ejemplo, carácters, en este caso.
Pues le doy a carácters.
Entonces, aquí ves que ya apenas vas escribiendo, te va dando errores.
Sí.
Y esto, eso es.
¿Qué te dice?
Me dice, bueno, este campo carácters es del tipo carácters y tiene que tener una selección de subcampos.
Entonces, querías decir carácters y ya me dice que tengo que seguir poniendo otras llaves.
Entonces, las pongo, le doy al enter, voy a quitar ahora.
Y ahora aquí, otra vez ves que sigue dando errores, necesitas alguna información dentro.
Claro, me dice, claro, esto me lo has dejado vacío.
Entonces, ahora puedo intentar volver a hacer control espacio y ya me dice, ah, los campos.
Eso es, sí, sí.
Estos son los campos que puedo recuperar del tipo, de la query carácters.
Así es.
Que es info y results.
Me imagino que es results.
Exactamente.
Result será el array de carácters.
Que en este caso, pues ya ves que, ves que cómo te ayuda la misma herramienta a crear tu query.
Vas tirando del hilo, ¿eh?
Vas tirando del hilo.
Y esto es muy habitual.
Tú abres escorchetes, oye, vas viendo que puedo hacer bien esto, lo que quiero.
Y vas un poco siguiendo la ayuda de la herramienta que es impresionante.
Brutal, no, no.
Por ahora me está encantando.
Ahora ya me está volviendo a decir, vale, que el campo results es del tipo un array de carácter, de carácter solo.
Y que tengo que volver a pedir, pues, subcampos de esto.
Sí.
Vale, pues le voy a volver a dar.
Ahora esto está vacío.
Voy a control comando y ya me dice todos los campos que puedo recuperar.
Y aquí esto ya empieza a verse como un carácter.
Entonces es como, bueno, pues vamos a pedir el ID, pide lo que quieras.
Vale, pues voy a poner el ID y aquí hay que poner coma.
No.
No hay que poner coma.
No, no hace falta, eso es.
No hace falta la coma.
Poner la coma.
Creo que si pones la coma no se queja, pero no hace falta.
Vale, y vamos a poner también el name que he visto y vamos a ver si había alguna cosa muy importante.
Bueno, el status para ver si, cómo está.
Eso es.
Vale, ¿y ahora qué?
¿Le doy al play?
Dale al play.
Vamos a ver.
Oh, nuestra primera query ya con resultados.
Muy bien.
Vale, tengo data, pero yo no he pedido nada con data.
¿Esto qué es?
Esto es cómo él agrupa toda la query que tienes.
Es otra convención de las que sigue GraphQL.
O sea que la convención, cuando te devuelve el objeto JSON, tienes una propiedad que es data
y vas a tener dentro de data la información que has pedido.
Claro.
Importante.
Eso es.
Vale, tenemos carácteres que es justo lo que había pedido, dentro de los resource que es lo que había pedido.
Y tengo un array de objetos que es justamente con ID, name y status, que son los tres que había pedido.
Eso es.
Vale.
Si ves, es la misma estructura, lo único que con información.
Es súper predecible.
Me encanta.
O sea, que si yo ahora elimino status y le doy aquí al play, pues desaparece status.
Eso es.
Y obviamente hay algunos que somos obsesos de los keywords.
No hace falta que le dejes al play si es una sola query.
Tú puedes darle comando enter.
Vale, pues vamos a probarlo.
Entonces, si estás allí, dale.
O sea, voy a poner alguno como gender y voy a hacer comando enter.
Ah, ahí está.
Comando enter.
Muy bien, muy bien.
A mí me encantan los shortcuts.
A mí también.
Bueno, en Visual Studio Code soy como todo el rato con shortcuts ahí.
Lo que es, a mí me pasa, y esto es un problemón, que en Visual Studio Code tengo un montón de shortcuts míos
y cuando voy a ordenador de otra persona, parezco inútil, ¿sabes?
Es de no sé programar.
Aparte, a mí me va peor porque yo tengo el teclado americano.
O sea, cuando voy a donde hay alguien que tiene el teclado español, es como no sé dónde están las cosas.
Totalmente.
No puedo.
Muy bien.
Bueno, me gustaría explicar algunas cositas aquí.
Sí, dale, dale.
Esta query, por ejemplo, que estamos viendo, es una query sin nombre.
No estamos nombrando esta query, pero podemos ponerle un nombre a esta query para, obviamente, poder reutilizarla en nuestro código.
Entonces, si vas antes del bracket inicial, aquí, puedes ponerle el keyword query y luego puedes ponerle el nombre que quieras.
Get characters, por ejemplo, with id and name o...
Sí, por ejemplo.
Bueno, no sé si queda...
Bueno, vamos a quitar esto y así que sea una query que quiera utilizar y ya está.
O sea, ahora ya tiene este nombre que podría reutilizar en cualquier sitio.
Y esta query, que es una cosa también, una distinción que siempre hago.
La query characters, que está allí en la línea número 2, es una query que está definida en el backend, ¿ok?
Y la query de la línea número 1 es una query que tú estás definiendo en tu frontend, ¿ok?
Esto es una forma de nombrar esas queries.
Entonces, lo otro que puedes hacer es que además de characters, si te vas debajo de ese objeto, dentro de la query de la línea 1,
aquí puedes pedir otra cosa.
Ah, ¿en serio? O sea, yo podría decir que quiero el character justamente...
¿Cómo?
Aquí, si te pones ahí dentro, le das a otra vez el control allí, te lo rellena porque solamente necesitas un id...
¿Necesitas un id?
Eso es, y puedes poner, por ejemplo, el número 2.
Y es dos puntos y la...
Eso es, y el valor.
Pues vamos a poner el 2.
Sí, es.
No sé si se tiene que...
Supongo que es como string porque si es un string...
Ah, ¿qué te dice?
A ver, ¿qué me dice?
Vale, que necesita una selección de subcampos.
Eso es.
Vamos a ver qué subcampos...
Pues vamos a poner el name, por ejemplo.
Es una query un poco rara, ¿eh?
Sí.
Porque estoy viendo caracteres y...
Pero bueno, es para ver el ejemplo.
Y ya le puedo dar comando enter.
Eso es.
Y si vas al final de todo, tienes characters y characters.
¡Wow!
Eso es.
Entonces, esta query está formada por muchas más queries de tu backend, pero la tienes
en el frontend solo como una.
¡Wow!
Pero esto es brutal, esto es brutal, porque ya no es solo el hecho que GraphQL por detrás
está haciendo a lo mejor seis peticiones en el backend para recuperar toda esta información.
Es que tú, en una sola query, o sea, en una sola petición, estás haciendo dos queries
a GraphQL que tú no sabes cuántas peticiones está haciendo en el backend.
Así es.
Esto, de verdad, esto no tenía ni idea.
Un roundtrip al server, una HTTP request, es más, se puede ver.
Y es brutal.
Esto es súper útil, porque, por ejemplo, podrías recuperar, claro, lo del carácter igual es
un poco raro, pero podrías recuperar todos los personajes y todos los species o episodes,
por ejemplo.
Y aquí ya decir, un resource.
¡Wow!
Sí, imagínate, por ejemplo, en una página, en una landing, en una landing tú tienes
la parte de arriba, pues tienes un listado de, yo qué sé, de posts o de cualquier cosa.
Todos son queries diferentes, pero haces una query para la home y lo tienes toda la información
y se lo mandas a React o a ver el framework que quieras y lo pintas todo.
Bueno, ya entiendo por qué Gatsby lo peta tanto.
Así es.
No, claro, porque Gatsby, imagino, que utiliza toda esta potencia justamente para...
Gatsby utiliza un GraphQL layer para poder acceder o agregar toda la información de las
sources que tengas.
Interesante.
Esto es otra serie, ¿eh?
Sí, no, esto es para decir, si lo peta y hay un montón de likes y un montón de comentarios
y un montón de gente lo comparte, hacemos el de Gatsby.
Venga, venga.
Vale, pues, no sé, ¿quieres comentar alguna cosita más por aquí?
Sí, otra cosa más.
En estas queries, aquí, por ejemplo, en la primera, en la línea número dos, no estamos
pidiendo ningún, no estamos pasando ningún valor, pero ya lo vimos con character, que
además también puedes pasarle valores a una query.
Estos valores obviamente están definidos en tu esquema.
Pero, claro, si tienes dos queries del esquema que necesitan dos valores diferentes, tú en
la query que estás creando, arriba, tú puedes definir los valores que quieres.
Por ejemplo, si ahora vamos a la línea 1 y al final del nombre pones unos paréntesis
y allí vamos a definir que le tenemos que pasar el ID del carácter, por ejemplo.
¿Vale?
Entonces tú dices...
¿ID?
O ID o character ID.
Vale, character ID.
Claro, lo interesante aquí es que como tú estás definiendo este tip, este valor, tienes
que ponerle un dollar sign al inicio.
Vale.
Eso es.
Y luego, aquí lo que tienes que decirle es qué tipo de valor es el que estás esperando.
En este caso es un ID.
De mayúscula.
Eso es.
Vale.
Esto es...
Claro, aquí lo que ya te está diciendo es, tú estás definiendo este tipo, pero no
lo estás usando, tienes que usarlo.
Vale, pues, vamos a intentarlo.
Antes tenía esto así, esto era así.
ID, claro, lo tenías hardcodeado, tenías el número 2.
Yo había hecho esto, pero voy a poner el name, para dejarlo.
Vale, era así.
Y entonces ahora que puedo utilizar directamente aquí esto.
Exactamente.
Oh.
Eso es.
Y otra cosa importante es que ahora mismo ese character ID en esa query no es requerido.
No es obligatorio.
No es obligatorio.
Pero si tú lo quieres hacer obligatorio, pones el signo de exclamación.
Aquí.
Y esto le dice a GraphQL, oye, aquí me tienes que pasar un ID sí o sí.
O si esto no funciona.
Si no me pasas el ID, no hago la query.
Y si le doy ahora, porque ahora yo no le estoy pasando esto por ningún sitio.
Si le doy a execute, bueno, vamos a dar a ejecutar.
Eso es, vamos a ver qué pasa.
Ah, ¿qué dice?
Sí, sí, me está diciendo, oye, que esto está requerido y no me lo estás pasando.
Exacto.
¿Cómo pasamos una variable en este?
Eso me estaba preguntando yo, gracias.
Eso es.
Tienes allí abajo, en el, arriba abajo a la izquierda, tienes este panel.
Si abres Query Variables, aquí puedes generar un objeto.
Vale.
En el que defines tus variables.
Vale.
Entonces aquí, a la que pongas las comillas, creo que si pones character, ahí ya ves que
ya está diciendo.
Tienes que poner character ID, hay que poner el número que quieras.
Vamos a poner el 2, que ya sabíamos que funcionaba.
Vale, tenemos character que es toda la lista y aquí tenemos Morty Smith.
Muy bien.
O sea, ya tenemos la query que es totalmente reutilizable, además parametrizada y que
tiene algún tipo de validación, porque esto, claro, esto es sencillo porque es solo
la ID, pero podría ser...
Otro tipo.
Claro, results per page.
Eso es.
Pues tiene que ser un número, pero esto es opcional.
Eso es.
Está súper guay, porque esto ya te está quitando un montón de código que no tienes
que mantener tú, ¿no?
De validaciones, de notes y me llega a esto.
Sí, ahora, luego, yo creo que cuando empecemos a usar el Apollo Client, que es el que vamos
a utilizar un poco para hacer la prueba, ya veremos todo lo que hace, porque hace muchas
cosas por nosotros.
Wow.
Y esto yo creo que es un buen sustituto de Redux, por ejemplo, si lo han utilizado
o no.
Te hace muchas cosas.
Luego yo creo que esto lo veremos en el siguiente.
Bueno, esto es spoiler ya, para que la gente tenga ganas para el siguiente.
Esto es spoiler.
Esto es spoiler.
Tenga ganas para el siguiente.
Así es.
Vale.
Muy bien.
Pues nada, ¿lo dejamos aquí este?
Sí.
Muy bien, perfecto.
Oye, me ha encantado.
Muchísimas gracias, Horacio.
Gracias por invitarme.
Sabía que tenía que invitarte, ¿verdad?
Me ha salido brutal, me ha salido brutal.
Me quedo con ganas de más y espero que vosotros también os estéis quedando con ganas de más.
Vamos a seguir con el siguiente, así que no te lo pierdas.
Muy bien, tío.
Me ha gustado mucho.
Ha salido súper orgánico lo de los tres patos.
Me ha gustado.
Sí, es brutal, es brutal.
Ha salido brutal.