5-razones-por-las-que-los-desarrolladores-Frontend-adoran-GraphQL-PORTADA

5 razones por las que los desarrolladores Frontend adoran GraphQL

Compártelo

¿Por qué GraphQL se ha convertido en algo fundamental en el desarrollo frontend del presente? Además de crear esas bonitas interfaces de usuario que nos regalan nuestros queridos diseñadores, de manejar la compleja lógica de la aplicación y la arquitectura de los componentes, nosotros, como desarrolladores frontend, trabajamos con un montón de datos que manipulamos en el proceso. En este post hablaré de cómo puede un desarrollador frontend ser más productivo y tener una mejor experiencia como desarrollador simplemente utilizando GraphQL.

Probablemente, como la mayoría de los desarrolladores, solía trabajar con APIs REST y lo disfrutaba, pero recientemente he tenido la oportunidad de trabajar con GraphQL y me he enamorado de él al instante.
He aquí las razones:

1) GraphQL sólo tiene un endpoint

Cuando trabajas con APIs REST, estás rodeado de un montón de endpoints, ya que su configuración se basa en los nombres de las entidades de la aplicación que representan. Además, cada entidad tiene diferentes métodos para manipular sus datos (POST, GET, DELETE, PUT, PATCH). Teniendo en cuenta todo esto
la API REST básica se parecerá a la imagen siguiente:

5 razones por las que los desarrolladores Frontend adoran GraphQL api

A mayor complejidad, habrá más entidades y endpoints/consultas más específicos…

GraphQL al rescate 🎉 ¡GraphQL sólo utiliza un endpoint !

El servidor GraphQL opera en una única URL/ endpoint, normalmente /graphql, y todas las peticiones GraphQL para un determinado servicio deben dirigirse a este endpoint.

2) GraphQL se autodocumenta

Desarrollar grandes aplicaciones, tener plazos, clientes difíciles o indecisos es la experiencia cotidiana de un desarrollador y, para ser sinceros, a veces, documentar las API no es la tarea más prioritaria. Por ello, la productividad del desarrollador y la experiencia del desarrollador (DX) pueden disminuir, ya que se necesitará más tiempo para entender lo que necesita exactamente un desarrollador, se hace más difícil incorporar a otros desarrolladores al proyecto, etc…

GraphQL al rescate (de nuevo) 🎉 ¡GraphQL se autodocumenta!

5 razones por las que los desarrolladores Frontend adoran GraphQL documentation

La documentación de GraphQL mantendrá a los desarrolladores del frontend al día de todos los cambios que puedan producirse.

3) No más underfetching/overfetching

Las APIs RESTful asumen por nosotros qué información de la entidad debe ser acoplada en su conjunto. No miran el diseño de la aplicación.
Dicho esto, los desarrolladores del frontend suelen obtener más información de la que necesitan para mostrar en la pantalla. A esto se le llama overfetching.
Por otro lado, algunas pantallas necesitan un poco de información extra que no obtenemos con una sola petición GET. Esto se llama underfetching. Para superar este problema, haremos otra petición para obtener los datos que necesitamos.
Bien, ahora hemos superado el problema de underfetching, pero recuerda que sólo necesitábamos un poco más de información, así que ahora estamos haciendo overfetching de nuevo (me huelo un bucle infinito aquí 😅).

GraphQL al rescate (y de nuevo) 🎉 ¡GraphQL nos permite consultar los datos que realmente necesitamos!

Envía una consulta GraphQL a tu API y obtén exactamente lo que necesitas, nada más y nada menos.

GraphQL es en realidad un lenguaje de consulta (Graph Query Language) y nos permite escribir nuestras propias consultas. De este modo, podemos ver el diseño dado y decidir qué información necesitamos obtener. Y también es sencillo: las consultas se escriben en una sintaxis similar a la de los objetos, en la que se especifican las claves y se obtienen los pares clave-valor, como en la imagen siguiente:

5 razones por las que los desarrolladores Frontend adoran GraphQL query

4) Playgrounds de GraphQL

Esto nos lleva al playground de GraphQL: GraphiQL. GraphiQL es una potente herramienta que te permite probar tus consultas, ver la respuesta, comprobar la documentación, el esquema y los tipos de los campos necesarios. Todo está escrito y hasta te ayuda con el autocompletado como un bonito toque final.
Todo lo que tienes que hacer es habilitar GraphiQL en tu backend (BE developer lo hará) e introducir tu único endpoint en la URL.

Ejemplo de una API de Rick y Morty de uso gratuito a continuación:

5 razones por las que los desarrolladores Frontend adoran GraphQL rick and morty

5) Cliente Apollo

Aunque Apollo Client no es la parte de GraphQL que viene de fábrica, hace que el DX sea mucho más agradable (…y el título del post: 4 razones por las que los desarrolladores de frontend adoran GraphQL no sería tan pegadizo). Lo más importante es que Apollo Client nos proporciona tres hooks personalizados fáciles de usar para manipular los datos: useQuery, useLazyQuery y useMutation.

useQuery – lo utilizamos cuando necesitamos obtener los datos al montar el componente. Devuelve un objeto que contiene los datos, el error si lo hay y el estado de carga.
Todo lo que necesitas pasar es un objeto query y options (si hay variables, cualquier cosa que haya que hacer onCompleted, etc.).

const { carga, error, datos } = useQuery(SOME_QUERY, opciones)

useLazyQuery – Lo utilizamos cuando necesitamos obtener los datos en algún evento (por ejemplo, al hacer clic en el botón de búsqueda). Devuelve un array que contiene una función a utilizar en algún evento y un objeto con los datos, el error si lo hay, y el estado de carga.

const [fetchOnSearch, { error, loading, data }] = useLazyQuery(SOME_QUERY, options)

useMutation – lo utilizamos cuando necesitamos mutar los datos. Devuelve un array que contiene una función que muta los datos y un objeto con los datos, el error, si lo hay, y el estado de carga.

const [fetchOnSearch, { error, carga, datos }] = useMutation(MUTATION_QUERY, opciones)

Conclusión

GraphQL fue creado por los desarrolladores de Facebook y es utilizado por muchas grandes empresas, lo que significa que no va a ir a ninguna parte. Así que, si eres un desarrollador frontend y buscas algo nuevo que probar, empieza con GraphQL, ¡puede que te enamores de él! 🥰

…Para una información más detallada, consulta las documentaciones oficiales de GraphQL y Apollo Client

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *