Pues ya estamos aquí en el tercer vídeo de la introducción a GraphQL y en este vídeo lo que vamos a hacer, Horacio, es conectar la API que hemos visto de Rick and Morty con React.
Para poder conectarlo vamos a utilizar un cliente de GraphQL que se llama Apollo Client, que es un poco lo que están viendo ahora.
Aquí tenemos la web. Apolo son los que también llevan Meteor, los que hacían Meteor antes y ellos por ahora son una organización enorme, también una fundación, bueno son un monstruo de gente y es el cliente de GraphQL más adoptado ahora.
Hay un par más, pero este es el que más se utiliza.
Interesante. Déjame que te pregunte, porque esto de Apolo no tiene absolutamente nada que ver como tal con Facebook, ni con ya dicho que es de Meteor.
Es un cliente con el que podría haber otro, ¿hay alguna alternativa? Porque sé que este es el más usado.
Hay varias.
Obviamente Facebook tiene el suyo que se llama Relay y también hay otro que se llama Urkel, que es de una empresa que se llama Formidable, que es bastante más pequeño, pero es muy potente.
Pero yo, a ver, muchas de las razones por las que utilizo una herramienta u otra es por la cantidad de comunidad que tenga, por la comunidad que tenga y también la documentación.
Y la verdad que la documentación de Apolo es muy, muy buena.
Es súper, súper completa. Nos ha costado incluso encontrar una página en concreto.
Sí, porque tiene de todo.
Tiene de todo. No solo, hay que tener en cuenta, y creo que esto es importante que lo mencionemos, que nosotros vamos a ver la integración con React, pero Apolo, el cliente de Apolo, lo puedes utilizar no solo con Angular u otras librerías, es que es una librería JavaScript.
Pues no necesitas una librería como React.
Con Ember, Angular, Vue, Vanilla, lo que quieras en realidad.
Exacto, totalmente. Muy bien, pues no sé, ¿quieres comentar alguna cosita más de Apolo?
Sí, otra cosa también es que una de las cosas buenas que tiene el cliente, bueno, Apolo y la empresa en general, es que los advocates o la gente que trabaja en Apolo son muy cercanos.
O sea, preguntarles a ellos cualquier cosa es muy fácil, por lo menos lo digo por experiencia propia, porque alguna vez hemos tenido que preguntar alguna cosilla y gente muy potente del sector responde sin problema.
O sea, que ese apoyo que uno puede recibir, yo creo que es también muy, muy, algo a tomar en cuenta cuando tú haces una adopción de una tecnología.
Totalmente.
Entonces, sin más, vamos a ver.
Vamos, vamos a ver.
A ver, sí, la idea yo creo que como todo el mundo quiere, cuando quieres empezar, ¿qué haces?
Es un alabundo típico, ¿no? Y haces que funcione lo mínimo para ver si eso funciona.
Eso es, Getting Started, vas a un Code Sandbox, coges la tutorial y eso es un poco lo que vamos a seguir aquí.
Sí, vamos a hacerlo.
Creo el Sandbox aquí en Code Sandbox, lo voy a crear de React.
Y aquí ya tenemos nuestro proyecto, no sé si lo voy a poder hacer un poquito, todo más chiquitito para que se vea bien el código.
Eso es.
A ver si lo puedo hacer aquí, bueno, más o menos, ya me iré peleando para ir viendo las cosas.
Eso es.
Vale, aquí tenemos el Get Started y nos dice que ya tenemos que instalar tres paquetes.
Nos dice que tenemos que instalar Apollo Boost, React, Apollo y GraphQL.
Sí.
Es interesante, aquí pone un poco la descripción, pero me gustaría que comentases un poco qué es exactamente cada uno y por qué tenemos que instalar las tres.
Porque alguien diría, ¿no? Pero yo esperaba solo una dependencia.
Exacto, pues ahí antes había más. Entonces, ahora lo han hecho mucho más simplificado.
¿Qué es? GraphQL es el core, es lo que te ayuda a parciar y a consumir una query, una mutation, una API y GraphQL.
Las voy a ir instalando las dependencias mientras las va explicando.
Eso es. Luego tenemos React Apollo, que es la implementación del cliente GraphQL, que, bueno, quizás puedes explicar un poquito qué es lo que hace este cliente GraphQL,
porque no solamente te ayuda a consumir una API, sino que hace otras cosas más que son importantes.
Y Apollo Boost es un compendio de varias herramientas que utiliza también Apollo para, por ejemplo, el tema de caching, linking sobre tu API.
Y tienen un montón de cosas que ellos, lo que han hecho para simplificar un poco este onboarding, las han unificado todas en Apollo Boost.
Entonces, ¿para qué necesitamos un cliente de GraphQL?
Ok. No hemos visto ninguna query en la network, pero otro dato curioso, todas las peticiones, queries, mutations, lo que sea, que haces por GraphQL son vía post.
Utilizan el verbo HTTP, post. ¿Por qué? Porque siempre estamos mandando un body. Siempre tenemos que mandar un JSON como el que estamos viendo, pero este JSON no se manda así, este JSON se parsea.
Entonces, si vemos esa query...
Estoy intentando enseñar eso del post que decías. Porque es verdad, no hemos enseñado la petición que se hace. Vamos a ver si veo el post.
Aquí tengo el método post y es una sola petición, pese a las queries que habíamos hecho en el anterior vídeo.
Y aquí tenemos toda la respuesta.
Exacto. Otra cosa que me gusta poner es solo un endpoint. Estamos haciendo la misma query al mismo endpoint. Entonces, si abres allí el post...
¿Aquí?
Sí, abre allí y en vez de vete a headers y si bajas al inicio, aquí, si ves el source...
¿El view source del payload?
Sí, esto. Este payload te lo ha parseado todo el cliente. En este caso, el cliente de GraphQL. Esto es lo que hace por... Es una de las cosas que hace por ti el cliente de Apolo.
También te hace ayuda para el caching. Si haces la misma petición varias veces, pues él tiene un store, como lo puede ser el store de Redux.
Y te ayuda a normalizar ese store, que eso es otra cosa que es muy tedioso y ellos lo hacen por ti.
O sea que... Por eso dije en uno de los vídeos, creo, del vídeo anterior o no sé cuál, que es un buen sustituto de Redux.
Porque puedes utilizar hasta Redux internamente de Apolo. Antes Redux era algo por defecto, ahora puedes usar cualquiera, el que tú quieras.
Y te ayuda a hacer todo esto y tú simplemente tienes que consumir la API, que es lo que vamos a hacer.
Perfecto. Vale, pues entonces, ya he instalado las tres dependencias, Apolo Boost, React Apollo, GraphQL.
Ahora ya me dice que tengo que crear el cliente, que tengo que importar a Apolo Client y tal.
Pues entonces, lo hago directamente en el index. Vale, pues lo primero que hacemos es, bueno, no sé si hace falta que lo vaya copiando, si no lo voy haciendo.
Importo a Apolo Client from Apolo Boost. Vale, y luego ya me dice que tengo que crear el cliente.
Ahora explicamos esto del URI, porque me imagino que es importante.
Creamos una constante llamada Client, decimos New Apollo Client y ya le pasamos un objeto que es la opción con un URI.
¿Qué es este URI? URI es la URL donde está tu API GraphQL.
Vale.
Entonces, en este caso, lo que tenemos que hacer es ir a la API de Rick and Morty y coger esa URL que tenemos allí arriba del todo.
Esta que teníamos aquí.
Aquí es donde está nuestra, como podemos acceder a la API.
De GraphQL. Vale, así que lo ponemos aquí.
Obviamente aquí puedes poner muchísimas cosas más, que esto será otro video avanzado.
Si tienen muchísimos likes, también, cuantos más likes...
Sí, pílanlo, pónganlo con él.
Eso, pílanlo.
¡Horacio, vuelve! ¡Nos ha encantado!
Vale, pues por ahora lo dejamos así de sencillo.
Vamos siguiendo todavía más el tutorial.
Aquí ya nos está diciendo que podríamos empezar a hacer nuestra primera query.
Eso es. Este cliente ya tiene el poder de hacer queries y poder consumir esta API.
Yo creo que esta parte no es muy práctica, porque así no es como habitualmente haces las cosas en tu aplicación.
Así que podemos seguir ya, yo creo, a la parte de React.
Vale, me he suelto este...
Conectamos el cliente a React.
Vamos a hacer que la magia pase.
Eso es.
Entonces, para poder utilizar este cliente, ellos utilizan el patrón de provider.
Entonces, ellos tienen un provider de React que viene de la librería React Apolo y ese provider espera un cliente, que es el cliente que acabamos de crear.
Entonces, podemos hacer esto.
Vale, o sea que hay que importar el provider que hemos visto aquí.
Eso es.
Y esto es lo que vamos a envolver toda nuestra aplicación.
Por ahora lo vamos a dejar aquí directamente o incluso podríamos hacerlo aquí.
Tampoco pasa nada.
Sí, podemos hacerlo allí.
Eso es.
Vamos a envolver toda nuestra aplicación y este client es justo el que hemos creado aquí arriba.
Así es.
Muy bien.
Vamos a guardar los cambios y ya nos lo ha formateado.
Perfecto.
Ya tenemos el provider.
Eso es.
Muy bien.
Entonces, ahora ya estamos listos para pedir data, para hacer una query en nuestra aplicación.
Entonces...
Guau, se ve aquí...
Hay varias maneras de hacer queries con GraphQL.
No sé qué versión de Apolo estamos utilizando.
2.5.
2.5.
Bueno, la versión 1, ellos utilizan el formato o la forma de High Order Component.
Ellos utilizaban un High Order Component para poder acceder o que tú pudieras acceder a las props de la query, de la data, de todo.
Ahora, desde la versión 2, ellos habilitaron este nuevo API, que es un API tipo render props.
Render props.
Eso es.
Muy bien.
Entonces, creo que es un pelín más limpia.
Podemos hacer algo muy rápido con esto.
Sí, pues hagamos una...
Voy a crear un nuevo archivo porque me imagino que se nos puede quedar bastante...
O no.
Sí, como quieras, da igual.
Puede ser aquí...
Bueno, pues hagámoslo en el mismo solo para que esté todo recogido y así sea alguna duda, pues lo hacemos mucho más rápido.
Bueno, es un componente pequeñito.
He importado el componente query, que me imagino que este es el que nos va a permitir hacer el tema de este render prop.
Y JQL.
Ajá, muy bien.
GQL.
GQL es el módulo que ayuda, que va a parsear todas las queries que nosotros escribimos de manera legible.
Nosotros vamos a escribir la query como la hemos estado escribiendo en GraphQL, pero esto luego va a ser todo el parsing de esa query y todo el formateo para que la API GraphQL lo reciba como tiene que recibirlo.
Perfecto.
Entonces...
¿Qué API? ¿Qué es lo que vamos a hacer?
Aquí lo primero que podemos hacer es que vamos a la API de Rick and Morty y hacemos, por ejemplo, pedimos characters.
Vale, vamos a pedir characters, pues vamos a eliminar aquí todo lo que habíamos.
Bueno, voy a crear, si te parece, voy a mover esto a otra nueva, así.
Creo que esto se debería quedar así.
Sí.
Vale.
Vamos a pintar esto.
Vale, vamos a intentar pintar esto.
Tenemos la constante.
Un componente characters.
Vale, pues characters.
Y esto es un componente, pues...
Sí, eso es.
Esto devuelve un componente query.
Return query.
Eso es.
Y este componente query le tenemos que pasar a la query.
Esta query tenemos que pasarle a un template literal, pero es una llamada a la función jql.
No, jql, perdón.
jql.
Eso es.
O sea, ¿lo puedo crear aquí dentro?
O fue.
Mejor...
Puedes crearlo allí o puedes crearlo directamente en la prop query.
Ah, aquí mismo.
Exacto.
Vale, pues hacemos aquí jql y...
Y pones backticks, eso es.
Ahí está.
Y aquí pegamos nuestra query.
Aquí todo lo que habíamos hecho.
Eso es.
Vale.
Entonces...
Lo has formateado bien y todo, de colores.
Sí, sí.
Maravilla.
Maravilloso.
Y esta, Code Sandbox, es la bomba.
Es increíble.
Y esta, aquí dentro, pues vamos a tener que implementar la función.
Vale.
O sea, que aquí hay una función.
Eso es.
Y en la función...
Esta función tiene no solamente la data, sino muchas cosas.
Si vamos a la docu, podemos ver que aquí tienes loading, error y data.
Es un objeto que trae todo esto.
Vale.
Así que aquí como parámetro es un objeto que tiene loading, error y data.
Eso es.
Entonces, obviamente, pues es bastante explicativo.
Sí, ¿no?
Loading va a ser true cuando la data no esté.
Claro.
Y entonces está cargando.
Y entonces está cargando.
Error.
Si hay algún error.
Y data, pues toda la información que hemos pedido.
Vale.
Es interesante porque aquí ya veo que está como bien...
Que si estoy cargando, voy a devolver esto.
Claro.
En la Render Props, normalmente, este patrón lo que devuelve es justamente lo que quieres renderizar.
Es una función que recibe diferentes parámetros y a partir de esos parámetros, lo que devuelvas es lo que renderizará.
Sí.
Como children.
Es bastante...
Es bastante curioso este...
Este patrón.
Sí, este patrón.
A veces es un poquito largo, pero bueno.
Eso es.
Vale.
Loading, error.
Y aquí vamos a decir...
Si todo va bien, quiere decir que tenemos data.
Entonces aquí vamos a...
Y en data tendríamos el children, ¿no?
Habíamos dicho que recuperábamos a characters, perdón.
Claro.
Si quieres, si vas al playground, aquí veríamos...
Aquí este es el objeto data que vas a recibir.
Esto es lo que habíamos dicho.
Lo importante que es que sea predecible.
Así que, results.
Ahora, map.
Aquí tenemos un character.
Y aquí ya podríamos hacer lo que quisiéramos renderizar.
Como por ejemplo, pues no sé.
A ver lo que devolviamos.
El name.
Y de y name.
Vale.
Pues ahí.
Pintamos el name.
El name.
Vale.
Character.name.
Ya está.
No se me olvida nada, ¿no?
Sí.
¿Sí se me ha olvidado?
No, no se me olvida nada.
No se me olvida nada.
Todo bien.
Perfecto.
Pues nada, ya guardo los cambios.
Genial que me lo ha formateado todo.
Tengo esta characters query.
Vamos a ver si aquí nos...
Ya nos dice nada más.
Porque supongo que ya podemos utilizar este...
Exacto.
Este es un componente de React ahora.
Perfecto.
O sea que ya podemos utilizarlo aquí.
Si yo lo quito todo esto y lo pongo aquí.
Y cerramos.
Y guardo los cambios.
Y vamos a ver si...
Ay, ¿dónde me ha dejado esto el...
Pint, pon en el cuadrito con el triángulo.
¿Este?
Ese, sí.
Aquí.
Ahí.
Es que me la...
Uf, me ha dejado ahí y...
Ya está.
Estamos pintando.
O sea, la primera Horacio, pero esto es una maravilla.
Bueno, nos dice...
Hemos seguido el tutorial, ¿eh?
Hemos seguido...
Sí.
Bueno, pero ya que hay que pasarle la key.
Claro, claro.
Esto...
Importantísimo esto.
Buenas prácticas siempre.
Eso es.
Hay que pasarle la key.
Y ya que tenemos aquí como key, no utilicéis el índice, que lo carga el diablo.
Así que como tenemos la idea que hemos cogido justamente de los resultados,
mucha mejor práctica, utilizar la idea.
Eso es.
Oye, ¿ahora me lo he cargado?
Ah, no, está aquí.
Vale.
Pues, oye, súper rápido.
En, no sé, 15 minutos.
15 minutos.
Hemos conseguido ya...
Hemos creado...
Hemos conocido que es Apollo Client.
Súper interesante.
Hemos conectado con la API de Rick and Morty.
Hemos creado un componente que además es súper...
O sea, es reutilizable ya este componente.
Eso es.
Y lo mejor, y esto lo dejamos un poco más de deberes para vosotros, para que penséis que una buena práctica, me imagino Horacio, sería que este componente en realidad pueda recuperar la render prop y renderizar diferentes cosas independientemente.
O sea, de forma que si lo usas en un sitio o en otro, tú recuperas la misma información, pero renderizas otra cosa.
O sea, de la misma forma que hemos hecho esto, aquí podríamos pasarle esta misma render prop y de forma que la podríamos reutilizar.
O sea, esto que hemos renderizado aquí, lo podríamos hacer aquí y esto sería lo que le llegaría como children aquí como función.
Claro, estamos haciendo una render prop de una render prop.
Exacto.
Podríamos reutilizar, pues a lo mejor esta información la queremos en un sitio de la web que se tiene que ver de una forma y en otra de otra y de esta forma podríamos hacer esto.
Esto, alguna vez se lo he escuchado, bueno, Kenzie Dots, no sé si lo conocen, pero esto es lo que le llama Inversion of Control.
Es lo que hace es que, sí, le ayuda a hacerte toda la lógica, pero da todo el control, toda la libertad a el usuario de tu API, al usuario de tu componente.
Exacto. De cómo lo quieres renderizar realmente.
¡Guau! Es que me parece tan potente esta idea y tan sencillo.
Sí, sí. En nada, en 15 minutos, hemos conectado una API.
Muy pocas líneas de código, casi no hemos tocado líneas de código, ya tenemos nuestra primera query y lo potente que es para habilitar.
O sea, que ahí tenéis deberes para ir probando ya, coger más campos y hacer todas las cosas.
Y también hemos visto lo fácil que es seguir la docu de Apolo, que con la ayuda de eso, pues hemos podido montar esto en nada.
Sí, vamos a ver una cosita y terminamos con esto, que esto ya es curiosidad mía.
Esto, lo primero, el loading, ahí aparece el loading, importante.
Y luego, si vemos todo el tema este de las peticiones, aparte de las de caché que hace CodeSanbox,
podemos ver cómo efectivamente solo está haciendo una sola petición, que se está cambiando el estado.
No tenemos un estado que nos diga si está cargando, qué muestro, sino que ya lo ha hecho todo Ria Capolo.
Lo ha hecho todo por nosotros.
Tremendo. Horacio, muchísimas gracias una vez más por enseñarnos un poquito más de GraphQL.
¿Qué vamos a ver en el siguiente y último, en su última entrega del vídeo?
Creo que ahora lo que vamos a irnos a la parte de server. Vamos a ver cómo esto está implementado.
Perfecto.
Y lo otro, si tienen preguntas o lo que sea, a comments y ahí estamos. Ya yo seguiré a ver si puede ayudar más.
Perfecto. Muy bien. Muchas gracias por seguirnos. Dale like, compártelo con tus amigos.
Y nada, en el siguiente, ya sabes, vamos a ver un poquito de backend. No te lo pierdas.
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
Gracias por ver el video.