Bienvenidos de nuevo, ya vamos por el cuarto vídeo de nuestra introducción de GraphQL y Riagapolo
y muchas cosas más que vamos a ver ahora mismo. Aquí estamos con Horacio, un vídeo más.
Muchas gracias por acompañarnos. Gracias por invitarme. No, hombre, gracias a ti por estar aquí.
¿Qué vamos a hacer en este vídeo, Horacio? Ok, ahora hemos estado viendo qué es GraphQL,
que es una query, hemos hecho queries, hemos implementado Apolo Client en React y ahora vamos a ver cómo está montado una API GraphQL
y crear una API GraphQL desde una API REST, ¿ok? Cómo podemos convertir una API REST a GraphQL y poder empezar a consumirla.
Muy bien. Eso es lo que vamos a intentar ver hoy. Es increíble porque hemos visto teoría, hemos visto la parte de frontend y ahora vamos a ver la parte del backend.
O sea, lo vamos a ver todo. Estamos viendo todo. Espectacular. Muchas gracias, Horacio, por compartirlo.
¿Cómo vamos a ver esta parte del backend? ¿Cómo vamos a hacer el ejercicio?
Ok, bueno, no sé si lo he mencionado en algún vídeo, pero yo soy coach en una escuela de Londres que se llama React GraphQL Academy.
Nosotros nos centramos en tanto React como GraphQL, como puedes ver, y enseñamos en diferentes formatos, bootcamp, también hacemos un part-time
y estamos en prácticamente varias ciudades de Europa como Londres, Amsterdam, Lisboa, Barcelona y próximamente muchos más sitios, pero bueno, esto es lo que hacemos.
Bootcamp de React, de fundamentos de React, React avanzado, workshop de React, GraphQL, GraphQL, GraphQL...
Y React Native también. Aquí no está puesto, pero React Native también lo enseñamos.
Entonces, lo que vamos a hacer es, vamos a coger uno de los ejercicios de una de las sesiones del curso,
cogemos el repo y vamos a tratar de implementarlo en 10 minutos.
Os vamos a dejar, vamos a intentarlo, os vamos a dejar en la descripción un enlace a este repositorio, es totalmente abierto.
Denle una estrellita, denle una estrellita, si le da gusto a lo for que hay, si colaboráis y lo que sea.
Esto es parte del material de vuestro bootcamp, o sea que es un parte de los ejercicios que hacéis.
Eso es, sí.
Vamos a hacer uno de los ejercicios.
Habitualmente tenemos, para la parte de React, tenemos un repo con diferentes partes,
que está allí, si vas a la organización, ahí están todos los repos que tenemos.
Y siempre intentamos hacer que los trainings sean una parte teórica muy pequeña y luego muy práctico,
que creo que es la forma en la que más aprendemos.
Además que promovemos mucho el per-programming.
O sea que esto...
Como estamos haciendo ahora mismo.
Exactamente.
Así que, perfecto.
Eso es.
Muy bien, pues nosotros ya hemos, como ya conocíamos el repo, pues ya nos lo hemos clonado,
así que lo tenéis que clonar vosotros y ya hemos hecho la instalación para así saltarnos toda esa parte
y ser mucho más rápidos y más ágiles.
Así que vamos a pasar directamente a la parte 2 de este ejercicio.
Este de to get started son los pasos que deberíais hacer para replicar este principio, clonar, instalar y todo esto.
Luego haces el npm start, que no he hecho, ahora recuérdame que lo haga, si no tenemos que entrar.
Y aquí tendríamos diferentes tareas.
Vamos a hacer solo la primera.
Eso es.
Vamos a intentar ir haciendo las que podamos, pero sobre todo vamos a hacer la primera y explicarlo para que ustedes en su casa puedan hacer las demás.
Perfecto.
Pues la primera tarea es crear un tipo carácter en el esquema.
Para eso vamos a utilizar la documentación del endpoint de carácter que hemos visto en Rick and Morty.
Ah, claro, eso no lo mencionamos.
Vamos a convertir la API de Rick and Morty de REST en GraphQL.
Eso es lo que vamos a hacer.
Sí, porque no sé si lo hemos comentado antes, pero la de Rick and Morty teníamos la versión de GraphQL que la hemos visto antes, pero también tiene la versión REST.
Y esto está guay porque de esta forma vamos a poder replicar la de GraphQL, pero haciéndola nosotros.
Así que está bastante guay.
Muy bien, aquí tengo ya abierto por aquí la documentación, pues sí, la necesitamos.
Y qué más nos dice, vale, pues ya nos dice que tenemos que añadir un campo carácter a la query.
Tipo query, creo que si vamos al código.
Al código y lo presentamos también.
Aquí tenemos el repositorio ya clonado, tenemos una carpeta source.
En el package pues ya hemos instalado todas las dependencias que necesitamos.
Aquí tenemos el index.js.
Eso es.
Vale, pues...
Y tenemos un montón de cosas.
Vale, un montón, ¿eh?
Eso es.
Entonces, esto es un repo muy simple de cómo crear una API GraphQL, ¿ok?
Estamos utilizando Apolo Server, el paquete Apolo Server, que como Apolo Client en el cliente, aquí nos hace muchísimas cosas también.
Y es muy fácil conectar una definición de esquema, que es lo que vamos a hacer, con toda nuestra información.
Entonces, esta implementación está hecha en JavaScript, pero Apolo, tanto Apolo como GraphQL, hay muchas implementaciones de muchos lenguajes distintos.
O sea, si te gusta PHP, hay una forma de hacerlo.
Si te gusta Go, Scala, cualquier lenguaje de backend, hay una manera de poder implementar un server de Apolo, GraphQL.
No lo sé.
No lo sé.
No creo, no creo.
En Haskell ya sea...
Sí, ya nos fuimos ahí.
Sí.
Entonces, aquí, bueno, para poder hacer el ejemplo muy rápido, tenemos un array local de books.
De libros.
Eso es.
Es un array de objetos, cada objeto tiene title y author, tenemos solo dos libros.
Eso es.
Y entonces aquí empieza el type definition.
Vale.
El type definition, ven que usamos el paquete GQL.
Otra vez.
Exacto, también lo utilizamos en el video anterior.
En el video anterior.
Y aquí estamos definiendo los tipos que podemos consumir en la API.
Entonces, en este caso, en la línea 24, tenemos el type book.
Y vemos que ese type book, pues, tiene título y autor.
Exacto.
Y son strings, tal y como lo tenemos aquí.
Exactamente.
Son strings.
Y luego, vemos que tenemos un type query.
Eso es.
Las APIs GraphQL deben de tener habitualmente dos tipos padres o dos tipos como principales que son.
Query y mutation.
Query es para consumir información.
Mutation es para modificar la información, cambiarla.
Perfecto.
Entonces, en esta query, como hemos mencionado también, aquí es donde estamos definiendo las queries que están en el server.
Que en este caso es la línea 32.
Tú puedes hacer una query a bugs.
¿Y qué te va a devolver eso?
Un array de tipo bug.
Del tipo bug.
Eso es.
Está bien porque lo puedes ver súper fácil y ya sabes lo que va a devolver.
Así que si quisieses añadir otra, pues, nada, lo añadiríamos justo debajo.
Sí, otra cosa muy importante, esta no es la única forma de definir un server de Apolo.
Hay muchas formas de hacerlo y esta es la forma más legible que ahora existe.
Así que para empezar, nos viene perfecto.
Exacto.
Vale, pues, ¿sigo bajando?
Sí, viene la parte importante aquí.
Para poder entonces conectar tu API GraphQL con tu data source, con tu información, con lo que sea, con tus otras APIs,
tú necesitas resolvers.
¿Qué son resolvers?
Es justamente la operación que va a hacer GraphQL, que va a ser el servidor, para poder llegar a la información.
Entonces, es un mapeo.
Es como un poco lo que estamos hablando en el primer vídeo.
Aquí lo que estamos diciendo es que cuando un usuario haga una query que sea bugs, ejecuta esta función.
Entonces, ¿qué va a devolver?
Aquí estamos devolviendo simplemente el objeto, el array bugs que teníamos definido arriba.
Exacto.
Este bugs que veis aquí, esto es, digamos, que es la query, lo que estamos pidiendo, la función que se va a ejecutar,
y lo que devuelve, como decía Horacio, está aquí arriba.
Es justamente este array.
Ahora mismo no estamos haciendo ninguna magia ni nada.
Es simplemente esto.
Eso es.
Muy bien.
Entonces, con esto, aquí vemos que se está creando el server con el paquete, con el módulo Apollo Server,
y aquí espera una configuración, que es este type definition que acabas de crear con los resolvers.
Vale.
Son type definitions y resolvers en un objeto.
Eso es.
Lo pasamos a Apollo Server.
Puedes pasar muchas más cosas, como es habitual, pero esto es lo mínimo necesario.
Vale.
Y ya tenemos aquí, pues básicamente, para escuchar el servidor que hemos creado,
y una vez que ya se ha creado, pues tienes la promesa, la resuelves, y pones un console.log para saber que se ha levantado todo perfectamente.
Ahí estamos.
Muy bien.
Aquí tenemos diferente información que estamos moqueando, que veremos más adelante.
Eso, esto es parte del ejercicio.
Es parte del ejercicio.
Nos vamos a olvidar por ahora.
Sí.
Pero vamos a ver que todo esto que nos ha explicado Horacio, esto funciona.
Así que vamos a hacer un npm start, y vamos a levantar el servidor en el puerto 4000.
Voy a copiarme esto por aquí.
Me voy a un navegador, aquí.
Y aquí tenemos el playground que habíamos visto en los vídeos anteriores.
Sí.
Por ahora está todo vacío.
Como me ha explicado Horacio, voy a hacer esto un poquito más grande para que la gente lo vea.
Me ha dicho que aquí podría hacer esto.
Books.
Muy bien.
Vamos a ver qué podemos pedir de books.
Pues el title y el autor, que justamente son los que habías comentado.
Lo buscamos, y aquí tenemos justamente el array que hemos visto en nuestro archivo.
Eso es.
Que estamos devolviendo.
Para ver fácilmente que esto está funcionando, pues podríamos añadir uno.
Dime tu libro favorito.
¿Mi libro favorito?
Bueno.
Me ha pillado.
¡Pasca!
Me ha pillado fuera de base.
Y encima que te cepas el autor.
Pues mira, un libro que me gusta mucho es El perfume.
El perfume.
Y no me acuerdo del autor.
Yo tampoco.
Vamos a poner...
Patrick Chusky.
No me acuerdo.
Patrick Chusky.
Me encanta.
Ese.
Patrick Chusky.
Patrick Chusky.
Ese mismo.
Vamos a volver a ver si Patrick Chusky está.
Le damos aquí y ya tenemos ahí a Patrick Chusky.
Eso es.
Patrick Chusky.
Me encanta.
No me acuerdo de nombre.
No te preocupes.
No me pasa nada.
Ahí lo tenemos.
Así que ya has podido ver lo fácil que ha sido añadir uno, ¿no?
Teníamos un no de mon, así que hemos guardado.
Se ha realizado el servidor, así que ya podemos acceder a nueva información.
Así de rápido.
Brutal.
Pues, ¿cómo era el ejercicio?
Ok.
Vamos a hacer un type character ahora.
Vale.
Vamos a hacer el type character.
Para eso vamos a las definiciones del type.
Tenemos el type book.
Eso es.
No hace falta que ponga un comentario, ¿no?
No.
No hace falta.
Vamos a poner el character.
Eso es.
Y aquí, entonces, tenemos que seguir en la definición de la API que tenemos.
¿Qué pasa?
En el repo, en ese fichero, tienes también un characters local.
Entonces, vamos a empezar por ese character local y devolvemos eso que está allí.
Muy bien.
Y luego, entonces, ya seguimos.
Justamente aquí teníamos toda esta información.
Vale.
Entonces, ¿qué hacemos con esto?
La definición, empezamos y decimos name, string.
Eso es.
Eso es.
Voy a copiármelo para tenerlo cerquita.
Muy bien.
Vale.
Voy a ponerlo aquí.
Luego, que no se olvide borrarlo, que si no esto no va a compilar jamás.
No pasa nada.
Sí, se va a quejar.
O sea, que tranquilo.
Así que empezamos.
Name es string.
Eso es.
Id es id.
Sí.
Id es un id.
Eso es.
No hace falta la coma.
No.
Ay, perdón.
Cierto.
Eso es.
Yo es que a mí me encanta poner comas a todo.
Status.
Status.
Aquí podemos hacer string para hacerlo más fácil.
Vale.
Pero podemos hacer un enum también.
Porque creo que si vamos a la doku de la API, aquí, si vemos el status,
solamente puede ser...
Alive, dead, unknown.
Y unknown.
Eso es.
Pues vamos a hacer enum.
Vamos a hacer...
No tengo ni idea cómo se hace.
Ok.
Entonces, si te vas arriba, línea 40...
Wow.
Te sale.
Sí.
Vale.
Aquí...
Fuera del tipo, tienes que definir el enum.
Entonces, es un enum.
Y aquí pones el character status.
Status, como quieras llamarlo.
Vale.
Character status.
Eso es.
Y aquí, entonces, solamente pones las palabras que quieres.
Alive, dead o...
Vale.
Eso es.
Que no me equivoque que es alive, dead...
Y unknown.
Con minúscula.
Vale.
Importante porque me imagino que...
Sabes lo que voy a hacer, ¿no?
Sí.
Exacto.
Sí.
Developers.
Eso es.
Developers.
Siempre copy-paste y te va a evitar muchos problemas.
Y aquí status.
En vez de un string...
Ya hemos creado...
Estamos creando ya tipos propias.
Estamos creando cosas que nos ayudan a limitar o a definir bien nuestra API.
Ok.
Muy bien.
Pues ya tengo aquí un enum y aquí añadimos el episodes por ahora.
Sí, episodes que podemos hacer ahora de momento un array de strings.
Vale.
Eso es.
Esto sería así, ¿no?
Sí.
Creo que sí.
Sí.
Creo que puedes escribirlo así o también string con el array afuera, creo.
Ah.
No me acuerdo ahora.
Vale.
Ahora lo probamos.
Voy a ponerlo así, que es el que más me suena.
Vamos a quitar esto.
Tenemos la definición.
Sí.
Pero esto todavía no está resolviendo, ¿no?
Sí.
Exactamente.
Lo intento.
Si vamos aquí, creo que te va a petar.
Esto, claro, ni siquiera...
Sí, porque no tienes...
Claro, no he añadido la query todavía.
No has creado el resolver asociado a este carácter.
Claro.
Pero todavía aquí también...
Ay, aparte de las queries, tienes razón.
Claro, porque si pongo aquí, digo, voy a ver lo que tengo, me dice bugs.
Claro, ¿por qué?
Porque todavía no he añadido el type query.
Eso es.
Y aparte, además, no se ha quejado porque en este type padre query no has utilizado carácter.
Claro.
Si aquí, por ejemplo, vamos a hacer el ejemplo.
No pones la query carácter, sino que bugs devuelve carácter, un array de carácter, se va a quejar.
Vale.
Aquí, si salvas, no se queja.
Uh, mira.
¿Por qué no se queja?
Ah, es que he borrado el comentario, ¿eh?
No, no importa.
O sea, no va a saber qué es igualmente.
Vale.
Porque eso no es lo que esa query...
Claro, resuelve.
Claro, porque resuelve le está devolviendo bugs.
Claro.
No está devolviendo carácter.
Sí, sí, sí.
Yo hago bugs, aquí, title, y entonces le voy a decir, eh, cannot fit.
Eso es.
Claro, dice, está el title...
Claro, si...
No sé si...
Bueno.
No creo que lo haga, ¿eh?
Sí, sería muy raro en el caso de que intentásemos pedir un campo que resulta que sí que estaba en carácter,
entonces se puede volver un poco loco.
Pero los campos no tienen sentido.
Vamos a hacerlo bien, entonces.
Aquí es bug.
Esto era bug.
Y vamos a crear la query characters.
Carácters.
Eso es.
Que esto es un array de carácter.
Eso es.
Ahí está.
Entonces, ahora sí, si guardamos...
Guardo.
Vuelvo aquí.
Ahora sí le digo, voy a ver si hago aquí...
Dale recarga, ¿verdad?
Voy a recargar.
Y...
Carácter, ahí tenemos characters.
Muy bien.
Ahora voy a hacer aquí la petición y vamos a ver lo que tengo.
Name, por ejemplo.
Y le doy a play.
Null.
Ah, mira, sale null.
¿Por qué?
Pero yo pensaba que iba a petar.
Está bien, está bien.
Exacto.
¿Por qué no peta?
La verdad es que esto es muy bueno.
No sabía que no petaba.
Porque supongo que resuelve gracefully.
Resuelve sin ningún problema.
Y esto es interesante.
Pero la verdad es que tenía la impresión de que iba a petar.
Yo también, yo también, ¿no?
Porque el resolver no está asociado.
No hay ningún resolver asociado.
Entonces, lo que tenemos que hacer es eso.
Claro.
Entonces, teníamos aquí la resolución de bugs, que era bugs.
Así que ahora vamos a añadir...
Aquí sí que tengo que poner la coma.
Exactamente.
Esto ya es JavaScript.
Esto ya es JavaScript.
Y habíamos dicho que era characters.
Esto tiene que ejecutar una función.
¿Qué va a devolver?
Pues aquí abajo teníamos este mockData.
Vamos a utilizar este characters y lo vamos a devolver, como lo estábamos devolviendo antes.
Exactamente.
Guardamos los cambios.
Y vamos a ver aquí.
Muy bien.
Ya lo tenemos.
Ahora mismo, claro, es un JSON ahí que tenemos manija.
Pero bueno, ya estamos resolviendo bien.
Ya tenemos nuestra definición del carácter.
Sí.
Guau.
No está mal.
Sí.
No está mal.
Así que, ¿qué hemos terminado aquí de nuestro ejercicio?
Vamos a ver.
Teníamos addCharacterFieldToTheQueryType.
You can replace the bugsField.
Sí.
Bueno, eso no lo hemos hecho.
Hemos hecho esta parte.
Fill inTheQueryType.
You return an array.
Hemos hecho el número uno.
Uno, uno.
Ya lo hemos hecho.
Eso es.
También creo...
A ver, este también lo hemos hecho.
AddCharacterResolverToTheQueryResolver.
Puedes reemplazar el bugs.
Y puedes devolver el mockCharacterSarray en TheResolver.
Eso es.
Vale.
Y ya...
Bueno, pues ya está.
Y que...
Pues si ya lo hemos hecho todo.
Ya está.
Bueno, pues ya hemos terminado.
Hemos terminado.
Yo creo que...
Yo creo que podemos dejarlo aquí.
Creo que podemos dejarlo aquí.
Y creo que lo que sería interesante y lo que creo que a todo el mundo,
seguro ahora está preguntando.
Dice, bueno, chicos, esto está muy bien, pero tenéis el objeto ahí.
Claro.
Eso es.
Y lo que la gente nos está viendo es lo que queréis hacer, una fetch con la API externa.
Así que eso es lo que vamos a hacer en el siguiente vídeo.
Así que no te lo pierdas.
Dale a like, compártelo, comenta.
Y si lo comentan mucho, va a volver Horacio.
Fíjate la cosa interesante que dice.
Hasta el siguiente.
Bueno, ha salido justo, ¿eh?
La segunda.
Gracias.