¿Pero puede tu cliente GraphQL hacer esto? - Una inmersión profunda en urql

Rate this content
Bookmark

Exploraremos cómo surgió el cliente GraphQL urql y qué lo hace destacar. Exploraremos cómo se resolvieron varios desafíos de nuevas formas desde los principios fundamentales. Espera ver características estándar futuras como el soporte sin conexión, una visión general de pequeñas opciones de diseño que están integradas en urql, y algunas características que ya son estándar y tienen soporte de primera parte, como la autenticación y la carga de archivos.

37 min
02 Jul, 2021

Video Summary and Transcription

Urql es un cliente GraphQL para React, React Native y otros frameworks, con soporte de primera parte para Next.js, Preact, Svelte y Vue. Ofrece flexibilidad y extensibilidad a través de intercambios, incluyendo intercambios de deduplicación, caché y recuperación. También se admite el almacenamiento en caché, la reintentación y la autenticación. Urql utiliza el almacenamiento en caché de documentos de forma predeterminada, pero ofrece un almacenamiento en caché de gráficos para una caché normalizada. Tiene un tamaño de paquete pequeño y una comunidad receptiva para soporte y colaboración.

Available in English

1. Introducción a Urql

Short description:

¡Hola, amigos! Hoy voy a hablar sobre Urql. Es un cliente de GraphQL para React, React Native y otros, desarrollado por Formidable. Urql se destaca por su soporte de primera parte para enlaces de frameworks. Tiene soporte incorporado para Next.js, Preact, Svelte y Vue. Apollo Client y Relay dependen de bibliotecas de terceros para el soporte de frameworks.

¡Hola, amigos! Muchas gracias por recibirme. Hoy voy a hablar sobre Urql. En particular, voy a profundizar en algunos de sus valores fundamentales y características destacadas. Pero primero, una breve introducción sobre mí. Mi nombre es Kaddy. Actualmente soy gerente de ingeniería en Mutable, donde paso la mayor parte de mi tiempo construyendo aplicaciones móviles, tanto en React Native como en GraphQL. Siempre he sido fan de GraphQL incluso antes de comenzar a usar React Native, pero después de haber utilizado tanto REST como GraphQL en aplicaciones móviles, puedo ver claramente cómo muchos de los beneficios de GraphQL pueden ser especialmente útiles para dispositivos móviles. Y realmente espero que algún día, GraphQL sea el estándar para las aplicaciones nativas.

Entonces, ¿por qué estoy aquí hablando de Urql? Bueno, Urql es un cliente de GraphQL para React, React Native, y otros, y es un proyecto de código abierto desarrollado por Formidable, que es la empresa para la que trabajo. Entonces, ¿qué es Urql? En Formidable, invertimos mucho en código abierto. Todos estamos parados sobre los hombros de gigantes aquí, y quiero decir, esta misma conferencia ni siquiera existiría si Facebook no hubiera decidido abrir el código de GraphQL en primer lugar. En Formidable, tenemos varias iniciativas para fomentar que las personas contribuyan al código abierto, tanto dentro de formida sauce como también en proyectos personales y de comunidad. Urql es uno de los muchos proyectos de código abierto que hemos desarrollado a lo largo de los años, pero actualmente creo que es el más emocionante. Originalmente, fue creado por Ken, luego fue reescrito por Phil y ahora cuenta con contribuciones de la comunidad y también de muchos de mis colegas de Formidable. Incluso yo mismo contribuí hace poco tiempo agregando un intercambio de autenticación para manejar la autenticación y el intercambio de tokens, pero más sobre eso más adelante. Con eso en mente, ¿deberías usar Urql? Bueno, hay varios otros clientes de GraphQL disponibles. Apollo Client y Relay en particular. En última instancia, la elección de qué cliente de GraphQL usar o no usar realmente debería depender de las características que necesites en tu proyecto. Para el resto de la charla, voy a repasar algunas de las características de Urql que creo que son especialmente geniales y hablar un poco sobre la filosofía general y el proceso de pensamiento que se ha utilizado para diseñarlas. Muy bien, una de las cosas que realmente se destaca en Urql en comparación con otros es el compromiso con el soporte de primera parte para enlaces de frameworks. Por lo tanto, fuera de React, Urql tiene soporte de primera parte incorporado para Next.js, Preact, Svelte y Vue. Aunque no hay planes de agregar enlaces a Angular, así que si eso es lo que te gusta, es posible que debas buscar en otro lugar. Apollo Client y Relay no brindan ningún tipo de soporte de primera parte para enlaces de frameworks fuera de React, y dependen completamente de bibliotecas de terceros. Esto está completamente bien. Esas bibliotecas fueron diseñadas para React, después de todo, y es la comunidad la que quería usar ellas para otros frameworks. Sin embargo, esto puede tener efectos negativos. Por ejemplo, cuando la biblioteca implementa nuevas características o cambios y actualizaciones que rompen, todo esto lleva tiempo para propagarse a las bibliotecas de terceros. Si tienes soporte de primera parte, estos cambios se incorporan a los enlaces desde el primer día. Si estás interesado en una comparación más detallada de estas bibliotecas, hay una sección completa en la documentación del artículo donde puedes encontrar una comparación de características bastante honesta entre Urql, Apollo Client y Relay. Sin embargo, durante el resto de esta charla, me voy a enfocar solo en Urql.

2. Flexibilidad y Exchanges en Urql

Short description:

Si hay algo que sabemos cuando se trata de tecnología es que las cosas cambian rápido y todo el tiempo. Al crear Urql, uno de los objetivos era asegurarse de que fuera lo más flexible posible, para poder adaptarse al cambiante panorama tecnológico. La extensibilidad es realmente el corazón de Urql, lo que nos lleva a los exchanges. Urql se basa en exchanges. Cuando instalas Urql y ejecutas una consulta, por defecto Urql utiliza tres exchanges. Estos vienen incluidos en UrqlCore. Tenemos el exchange dedupe, el exchange cache y el exchange fetch. El exchange dedupe elimina las solicitudes duplicadas cuando la solicitud exacta ya está en curso. El exchange cache devuelve los datos de la caché si los hay. Y finalmente, el exchange fetch realiza la solicitud de red real y devuelve el resultado al flujo de salida.

Si hay algo que sabemos cuando se trata de tecnología es que las cosas cambian rápido y todo el tiempo. Nuevas características del lenguaje aparecen, bibliotecas, convenciones, las cosas que son geniales cambian e incluso los requisitos comerciales surgen todo el tiempo. Al crear Urql, uno de los objetivos era asegurarse de que fuera lo más flexible posible, para poder adaptarse al cambiante panorama tecnológico. Por lo tanto, para hacer que Urql sea lo más adaptable posible, se construyó para ser lo más extensible posible. La extensibilidad es realmente el corazón de Urql, lo que nos lleva a los exchanges. Urql se basa en exchanges. Así que si piensas en lo que hace un cliente de GraphQL en su núcleo, toma una solicitud, una consulta o una mutación, y devuelve la respuesta adecuada, ya sea un resultado de caché, una respuesta de la API o un error. Como resultado, la mayoría de los clientes de GraphQL, incluido Urql, están construidos para ser basados en streams. Un exchange es simplemente un complemento que te permite inspeccionar y modificar tanto los streams de entrada como los de salida. Permíteme mostrarte esto con un ejemplo, porque eso lo hará mucho más claro. Cuando instalas Urql y ejecutas una consulta, por defecto Urql utiliza tres exchanges. Estos vienen incluidos en UrqlCore. Tenemos el exchange dedupe, el exchange cache y el exchange fetch. Todos estos son completamente reemplazables, por cierto, por lo que puedes intercambiar cualquiera de ellos por una implementación personalizada o alternativa. Primero, el exchange dedupe, elimina las solicitudes duplicadas cuando la solicitud exacta ya está en curso. Imagina un sitio web con un encabezado y una barra lateral. Ambos quieren mostrar el nombre del usuario. Ambos utilizarán una consulta con exactamente la misma consulta. Lo que hace el exchange dedupe es asegurarse de que solo se pase una instancia de esa consulta al siguiente exchange, y por lo tanto, eliminar la necesidad de una solicitud duplicada a la API. Luego, el exchange cache devuelve los datos de la caché si los hay. Y finalmente, el exchange fetch, que siempre estará en el último exchange del array, realiza la solicitud de red real y devuelve el resultado al flujo de salida. Luego, el resultado se pasa desde el exchange de solicitud de red al exchange de caché, donde se almacena para la próxima vez, y finalmente, se devuelve al resultado de la consulta. Ahora, dado que literalmente puedes agregar una cantidad ilimitada de complementos, la única forma de garantizar que todos funcionen bien entre sí es asegurarse de que cada complemento sea poco opinativo. Veamos un ejemplo real de esto en los Exchanges. Primero, tenemos el exchange fetch del que ya hemos hablado. Este es el exchange fetch predeterminado incluido en Urql Core. Obtiene los datos de la API y los agrega al flujo de salida. Ahora, como un paquete adicional separado, puedes instalar un paquete adicional para consultas persistentes automáticas en un exchange fetch persistente. Este exchange utiliza la misma lógica de fetch que el exchange fetch real. Pero con consultas persistentes automáticas, básicamente funciona de la siguiente manera:

3. Caching, Exchanges, Retry, and Auth in Urql

Short description:

El servidor puede almacenar en caché las solicitudes basadas en fragmentos desde el lado del cliente, y el cliente puede solicitar fragmentos específicos. Las mutaciones no se almacenan en caché y deben pasarse al intercambio de fetch. El intercambio de fetch persistente admite consultas persistentes automáticas y cargas de archivos. Urql ofrece un enfoque completo con intercambios extensibles. El intercambio de reintento permite reintentos automáticos de solicitudes, y el intercambio de autenticación maneja la autenticación para React y React Native.

Una de las características de Urql es que permite la caché en el lado del servidor de los datos de GraphQL. Por lo tanto, el servidor puede almacenar en caché la solicitud basada en un fragmento de la solicitud completa desde el lado del cliente. Luego, en el cliente, podemos solicitar al servidor una solicitud específica basada en el fragmento. Y si el servidor ya tiene una solicitud exactamente con ese fragmento, puede devolver la respuesta desde la caché del lado del servidor. De lo contrario, dirá que no sabe nada al respecto y nos pedirá más información, en cuyo caso podemos realizar la consulta. Ahora, el intercambio de fetch persistente debe colocarse antes del intercambio de fetch real porque, en primer lugar, las mutaciones no se almacenan en caché y, por lo tanto, no se pueden pasar. Deben pasarse al intercambio de fetch para manejarlas. En segundo lugar, si el servidor no admite consultas persistentes automáticas, en cuyo caso la solicitud también deberá pasarse al intercambio de fetch. Otro ejemplo, si deseas habilitar la carga de archivos, puedes hacerlo a través de formularios multipartes y solicitudes POST utilizando el intercambio de fetch multipartes. Este intercambio utiliza la misma lógica de fetch que el intercambio de fetch, pero es un reemplazo directo del intercambio de fetch predeterminado. Funciona exactamente igual que el intercambio de fetch, a menos que las variables que recibe para una mutación contengan archivos. Por último, como podrás haber deducido, también puedes combinar los dos intercambios en un intercambio de fetch multipartes persistente que admitirá tanto consultas persistentes automáticas como carga de archivos. En general, Urql busca ofrecer un enfoque completo, lo que significa que es como una tienda única para todo lo que necesitas de tu cliente de GraphQL. Afortunadamente, debido a la elección arquitectónica fundamental de depender de intercambios con opiniones, cada nueva función o mejora se puede integrar y jugar con el intercambio correspondiente. Ya hemos visto los intercambios de fetch, pero echemos un vistazo a un par más. Un intercambio útil es el intercambio de reintento, que te permite reintentar automáticamente las solicitudes. Puedes configurar un retraso, que puede ser un valor fijo en segundos o un valor aleatorio, y el número máximo de reintentos. Y uno que me interesa especialmente es el intercambio de autenticación. La autenticación en GraphQL ha sido mi mayor problema desde siempre. He tenido que implementarla varias veces y siempre ha sido doloroso. De hecho, hay una dificultad adicional con React Native en comparación con la web, porque el almacenamiento de tokens es asíncrono, lo que debe tenerse en cuenta al obtener el estado de autenticación inicial. Por lo tanto, con el intercambio de autenticación, mi objetivo era hacerlo extensible para que pudiera usarse tanto para React Native como para la web y para las diferentes implementaciones de autenticación. Por lo tanto, admite tanto React como React Native. Es decir, puedes obtener el token de forma asíncrona o sincrónica. Admite la actualización del token, tanto como una mutación como un punto de obtención por separado. Puedes configurar el encabezado de autenticación de la forma en que funcione en tu aplicación. A veces tienes un token de portador o simplemente un token o tal vez algunos encabezados adicionales. Y finalmente, podrás determinar qué se considera un error de autenticación en tu API y cerrar sesión o manejarlo según sea necesario. Algunas API aún utilizan códigos de error HTTP para errores de autenticación y algunas API utilizan códigos de autenticación, y se pueden configurar de varias formas. Por lo tanto, el intercambio de autenticación admite varias implementaciones en el lado del servidor.

4. DevTools y Caché en Urql

Short description:

Go tiene DevTools que se pueden instalar como un intercambio. Con DevTools, puedes inspeccionar consultas, resultados, líneas de tiempo y ejecutar solicitudes directamente. Urql utiliza la caché de documentos de forma predeterminada, creando una clave para cada solicitud y almacenando en caché el resultado. Sin embargo, las mutaciones pueden invalidar los resultados almacenados en caché. La caché de gráficos normalizada es un reemplazo directo de la caché de documentos, resolviendo la duplicación de datos y las limitaciones de soporte sin conexión. Las actualizaciones optimistas de la caché de gráficos se superponen a los datos existentes sin modificarlos.

En cuanto a DevTools. Ahora, no profundizaré mucho en DevTools, pero basta decir que Go tiene DevTools y, sorpresa, sorpresa, puedes instalarlos como un intercambio. Está disponible como una extensión de Chrome o Firefox o como una aplicación de Electron. Con DevTools, puedes inspeccionar las consultas, resultados, líneas de tiempo y también ejecutar solicitudes directamente desde DevTools, lo cual puede ser realmente útil porque utilizará todos los intercambios que hayas configurado localmente. Bien, es hora de hablar sobre la caché. Por defecto, Urql utiliza la caché de documentos. Evitará enviar la misma solicitud a la API de GraphQL repetidamente almacenando en caché el resultado de cada consulta. Esto funciona básicamente de la misma manera que una caché en el navegador. Por lo tanto, Urql crea una clave para cada solicitud que se establece en función de la consulta y sus variables. Una vez que llega un resultado, se almacena en caché indefinidamente por su clave. Esto significa que cada solicitud única puede tener exactamente un resultado almacenado en caché. Sin embargo, cuando almacenamos en caché las consultas, también necesitamos invalidar los resultados almacenados en caché que necesitamos. Por lo tanto, con la caché de documentos, asumimos que un resultado puede ser invalidado por una mutación que se ejecuta en data que se ha consultado anteriormente, la invalidación de la caché se realiza solo a través de la propiedad del nombre del tipo. Por lo tanto, cuando enviamos una mutación que contiene tipos que también contiene los resultados de otra consulta, ese resultado de la consulta se elimina de la caché.

Y esto nos lleva a la opción alternativa de caché para Urql, la caché normalizada. La caché de documentos es sencilla y efectiva, pero tiene algunas limitaciones. Por lo tanto, antes de entrar en la caché normalizada, veamos por qué fue necesaria y cuáles fueron las limitaciones de la caché de documentos. En primer lugar, a medida que tu aplicación crece, comienza a duplicar muchos data. Considera, por ejemplo, una lista paginada con parámetros de filtro. Debido a que la caché se basa en la consulta y los parámetros, terminarás almacenando los mismos elementos varias veces. Con la caché de documentos, debido a que solo usamos el nombre del tipo para data e invalidación y no algún tipo de ID, no hay forma de reconciliar automáticamente los data. Y esto nos lleva al número tres, que es que si tu aplicación tiene mutaciones, no podrás tener soporte sin conexión con la caché de documentos. La solución de caché normalizada para urql se llama caché de gráficos y está diseñada para resolver estos problemas difíciles. Recuerda toda la extensibilidad mencionada anteriormente, los intercambios que son no opinativos y reemplazables. Bueno, la caché de gráficos es un reemplazo directo de la caché de documentos predeterminada. No voy a hablar mucho en profundidad sobre la caché de gráficos, pero mencionaré las cuatro características principales, algunas características interesantes cuando se trata de la caché de gráficos. En primer lugar, obviamente tenemos actualizaciones optimistas, pero lo único único de cómo la caché de gráficos realiza actualizaciones optimistas es que nunca toca realmente los datos reales. Siempre crea una capa encima de tus datos existentes. Cuando la consulta tiene éxito, ejecuta tu actualizador personalizado en los datos reales. Por lo tanto, mientras tenemos la fuente de verdad del servidor, tus datos reales no se modifican. Sé que otras soluciones de caché tienden a crear un registro simulado con un simulacro

5. Conciencia del esquema y datos parciales en Urql

Short description:

La conciencia del esquema permite que la caché te advierta sobre errores de consulta y sirva datos parciales. Por ejemplo, en un sitio de comercio electrónico, puedes mostrar información básica del producto desde la caché mientras esperas detalles adicionales.

ID y luego reemplazarlo más tarde, por lo que la caché de gráficos no hace nada de eso. En segundo lugar, tenemos la conciencia del esquema. Esto significa que obtenemos la consulta de introspección y así podemos hacer que la caché sea consciente de ella. Luego, puedes recibir advertencias cuando estás haciendo algo mal, por ejemplo, si estás utilizando el tipo incorrecto de condición como una consulta, fragmentos inválidos, consultando campos no consultables, cosas así. Y dado que la caché es consciente de tu esquema, también puede servirte datos parciales. Un buen ejemplo de esto es, por ejemplo, un sitio de comercio electrónico. En un sitio de comercio electrónico, tienes una lista de productos y, para mostrar esta lista, generalmente consultarías solo la imagen, el nombre y tal vez el precio. Mientras que si vas a la página de detalle del producto, tendrás todo tipo de detalles sobre tallas, materiales, etc. Por lo tanto, con datos parciales, cuando pasas de una lista de productos a la página de detalle de un producto, podemos devolver los datos que ya tenemos en la caché. Por lo tanto, puedes comenzar, puedes mostrar la imagen, el nombre y el precio de inmediato sin esperar el producto

6. Conmutatividad, Tamaño del paquete y Recursos

Short description:

La conmutatividad es importante para las aplicaciones offline-first. Graphcache maneja el soporte offline de manera efectiva. El tamaño del paquete de Urql es pequeño, lo que lleva a tiempos de análisis más rápidos y una mejor experiencia en dispositivos más lentos. Para obtener más información, consulta la documentación oficial y la comunidad de Urql en GitHub.

return con todos los detalles. Y finalmente, y esto es realmente importante, la conmutatividad. Esta es la fuerza impulsora para poder hacer offline first, asegurando que las consultas se apliquen en una caché en el orden en que se ejecutan. Por ejemplo, si haces tres consultas en orden, en realidad no hay garantía de que vuelvan del servidor en ese orden. Entonces, si la segunda consulta se devuelve primero, lo que hace Graphcache es aplicarla de la misma manera que una actualización optimista sobre tu caché. Luego, finalmente cuando la primera consulta regresa, se aplicarán en orden. Así que con Graphcache, podemos construir aplicaciones offline first, y eso es increíble. Personalmente, lo encuentro especialmente poderoso para aplicaciones móviles donde los usuarios esperan un nivel de funcionalidad incluso cuando no están conectados a Internet. Con la conciencia del esquema, las actualizaciones optimistas y la conmutatividad, Graphcache está diseñado para manejar el soporte offline de manera efectiva.

Y finalmente, ¿qué hay del tamaño del paquete? Bueno, a menudo lo primero que se menciona cuando se habla de Urql es lo pequeño que es en comparación con otras alternativas. Y bueno, sí, el tamaño del paquete es pequeño y hay números para respaldarlo. Pero en lugar de centrarse en los números, puede ser importante centrarse en por qué se hizo el esfuerzo de reducir el tamaño del paquete. En última instancia, cuanto más pequeño sea el tamaño del paquete, más cortos serán los tiempos de análisis. Graphcache también tiene un bajo impacto en la presión de memoria y es rápido en dispositivos más lentos. Queremos asegurarnos de que los usuarios en países y áreas de todo el mundo con una conexión a Internet más lenta obtengan la mejor experiencia posible en la web. Esto conduce a una web rápida e inclusiva. Eso es todo de mi parte. Realmente espero que hayas encontrado esta información valiosa sobre Urql. Si quieres saber más, te voy a dejar con dos recursos principales. En primer lugar, obviamente, tenemos la documentación oficial. Es muy completa. Podrás encontrar información adicional sobre todos los temas que cubrí aquí hoy. Pero lo más importante, tenemos la comunidad de Urql, que se encuentra en la pestaña de discusión en GitHub. Honestamente, diría que este es uno de los grandes puntos de venta de Urql. Los mantenedores principales se aseguran de estar al tanto y todas las discusiones son respondidas, y puedes preguntar prácticamente cualquier cosa sobre Urql, desde problemas de implementación hasta solicitudes de funciones, o incluso pedir una explicación sobre el origen de la biblioteca en sí misma. Muchas gracias. Hola. Hola, Caddy. Qué bueno verte de nuevo. Oh, qué bueno verte de nuevo. Me gusta el maquillaje.

QnA

Esquema de colores invertido y Preguntas de los espectadores

Short description:

Hoy, vamos a utilizar el esquema de colores invertido. ¿Estás listo para responder algunas preguntas de los espectadores? No todos los marcos de trabajo con integración son utilizados por Formidable, pero tienen la aprobación del mantenedor. La gente está contenta de tener cosas que utilizan su marco de trabajo sin tener que mantenerlo. Una pregunta sobre el concepto similar del cliente Apollo al intercambio DDoop de Urkel. No lo sé, consulta el repositorio de Urkel en GitHub para obtener más información.

Te has esforzado al máximo. Sí. Hoy, vamos a utilizar el esquema de colores invertido. Ayer, era como un fondo negro y estrellas blancas. Hoy, es como, bueno, no lo sé. No soy coreano. Tengo una vibra completamente diferente. Así que, optamos por el esquema de colores invertido. El delineador de ojos. Sí, gracias. Tienes que hacer algo con este trabajo de MC, ¿verdad?

Sí, entonces, Urkel, tu charla. Incluso tenemos varias preguntas de los espectadores. ¿Estás listo para responder algunas? De acuerdo, vamos a hacerlo. Muy bien. Pregunta uno de Alexander. Con soporte de primera parte para marcos de trabajo tan diversos, ¿cómo te aseguras de que tu soporte tenga la mejor integración posible? ¿Se utilizan todos los marcos de trabajo para los que se proporciona integración por parte de Formidable? No todos ellos son utilizados por Formidable. Por ejemplo, la integración con Vue es bastante reciente y no tenemos ningún proyecto de Vue, que yo sepa. Sé que todas las vinculaciones de marcos de trabajo han obtenido la aprobación del mantenedor. Entonces, lo que intentamos hacer es, sé que cuando se crean las vinculaciones de marcos de trabajo, se someten a los mantenedores de ese marco de trabajo para que digan, sí, esto suena bien, o no, te has olvidado de algo.

Eso es interesante. Entonces, tocas a la puerta de los mantenedores del proyecto y les dices, tengo algo, por favor apruébalo. Bueno, más o menos. Quiero decir, la gente está realmente contenta de tener cosas que utilizan su marco de trabajo y que ellos mismos no tienen que mantener. Así que, en realidad, es una oferta bastante popular. Sí, el sueño del código abierto, ¿verdad? Donde la gente se une y trabaja en lugar de la realidad del código abierto, donde a menudo sigues siendo tú quien hace todo el trabajo. Sí, sí, exactamente. Muy bien, pregunta número dos de Djapar Dejad. Solo por curiosidad, ¿tiene el cliente Apollo un concepto similar al intercambio DDoop de Urkel? Ahora, eso es astuto, porque se sale completamente de la especificación de la charla y pregunta sobre tu cliente Apollo, pero veamos. Oh, creo que sí, seré honesto y diré que no lo sé. Creo que para cualquier pregunta que no te guste que no sepa, te sugiero que vayas al repositorio de Urkel en GitHub, a la pestaña de discusión y preguntes allí.

Q&A sobre Urql y Apollo

Short description:

Y Phil y Jovi, que son los mantenedores principales, te responderán en un par de horas. Siempre es bueno admitir cuando no sabes la respuesta. La pregunta sobre entradas duplicadas en las consultas es interesante y parece que se realiza por la consulta real. Comparando Urql y Apollo, son similares como clientes de GraphQL pero difieren en ideas y gestión de caché. Urql fue construido desde cero, enfocándose en lo que realmente se necesita.

Y Phil y Jovi, que son los mantenedores principales, te responderán en, ya sabes, un par de horas como máximo. Así que esa, no lo sé, me temo. No te preocupes. Hey, siempre es bueno decir que no sabes. Cuando no sabes, la gente se enfada mucho cuando inventas respuestas. Extraño. Sí, con eso. Es como, oh no, puedes usarlo en producción hoy, huye.

De acuerdo, pregunta número tres de Juan. Cuando dices que elimina entradas duplicadas, ¿te refieres a que eliminaría campos duplicados en la misma consulta? Por ejemplo, ¿qué sucedería si la consulta 1 solicita nombre y edad, y la consulta 2 solicita nombre y nacionalidad de una persona? Ten en cuenta que ambas solicitudes usaron la misma consulta de tipo persona. Luego podemos devolver nombre, edad o nacionalidad. Esa es otra excelente pregunta, Phil o Jovi. Lo que supongo es que se realiza por la consulta real, por lo que todo el proceso de consulta tendría que ser el mismo. Pero no estoy 100% seguro. Bastante justo.

Así que lo que he hecho es revisar las preguntas que están surgiendo. Diré que un tema recurrente es, ¿qué pasa con Apollo? Por lo tanto, para los miembros de la audiencia, como alguien que ha utilizado ambas plataformas, la documentación de Apollo para las preguntas de Apollo es probablemente muy importante. Pero repasemos esto y veamos qué podemos hacer. Pregunta número cuatro de Radha, muy general. ¿Cómo se compara Urql con Apollo? Y supongo que se refieren al cliente Apollo frontend en lugar de su oferta de servidor. Sí, en términos de implementación o filosofía, supongo que es la pregunta. La pregunta no especifica, así que puedes elegir la que prefieras.

Sí, son similares en el sentido de que ambos son clientes de GraphQL. En el espacio de frontend, la intención original era utilizarlo con React. Sin embargo, son bastante diferentes en cuanto a las ideas que los rodean y la gestión de caché. Así que, Urql no fue construido para ser como Apollo, pero mejor. Fue volver a empezar desde cero en la creación de un cliente de GraphQL y preguntarnos qué necesitamos realmente. Desde los principios básicos, así que empezamos desde cero. Y con el tiempo, por ejemplo, la API de hooks. Por lo tanto, notarás que la API para interactuar con los clientes de Apollo y Urql es bastante similar. Aún tienes el hook de uso de consulta porque eso es genial en estos días. Aún estás analizando un GraphQL como una cadena porque, ya sabes, así es como se consulta a los clientes de GraphQL.

Soporte de la Comunidad de Urql

Short description:

Urql cuenta con una comunidad altamente receptiva, lo que facilita obtener respuestas y soporte. En contraste, Apollo Client puede que no tenga el mismo nivel de prioridad y soporte debido a sus muchos otros productos. La comunidad de Urql, liderada por Phil y Joey, prioriza la creación de un entorno amigable y colaborativo para todos.

Entonces, hay similitudes simplemente porque ambas bibliotecas han llegado a una solución similar, pero son bastante diferentes en cuanto a las ideas detrás de ellas. Entonces, una cosa realmente increíble en Urql, y creo que, en lo que a mí respecta, esa es la razón número uno para investigar Urql es que la comunidad es extremadamente receptiva. Entonces, si tienes un problema o una pregunta, como un problema de implementación o simplemente una pregunta como algunas de estas a las que he sido reacio a responder todo lo que tienes que hacer es ir a las pestañas de discusión en Urql y a menos que tu comentario sea como un troll prácticamente garantizado que obtendrás respuestas. Entonces, si miras las discusiones, ya sabes que ninguna de ellas queda sin respuesta, lo cual es realmente agradable porque básicamente sabes que si decides usar Urql basado en las características que tiene, entonces sí, sabrás que recibirás soporte. No te encontrarás en una situación en la que digas, oh, no hace lo que quiero. ¿Es siquiera posible? Siempre habrá alguien a quien preguntar. En cambio, con los clientes de Apollo simplemente porque hay tantos otros productos que Apollo gestiona como el cliente es solo una pequeña parte, para ellos, de su oferta de código abierto y, ya sabes, no siempre tiene la máxima prioridad de soporte. Sí, definitivamente puedo entender eso. Hago mucho trabajo en Federation que es una de las ramas más pequeñas de sus ofertas de código abierto y, ya sabes, definitivamente son personas muy serviciales pero a veces cuando estás inmerso en algún plan de consulta apresurado creo que esto probablemente está muy abajo en la enorme pila de productos para mantener así que aquí estoy tratando de resolverlo por mí mismo. Sí, exactamente y también la comunidad. Conozco a Phil y Joey, y estoy seguro de que muchos de ustedes también los conocen son las dos personas principales tanto en la construcción de Urql como en Graphcache pero también en la gestión de la comunidad y su máxima prioridad es hacer que la comunidad sea amigable y servicial y eso, ya sabes, todos solo quieren ayudarse mutuamente a construir cosas increíbles.

Logrando un Tamaño Pequeño en Urql

Short description:

Mencionaste que Urql es muy, muy pequeño. ¿Cómo logra esto? Se asegura de que cada componente de Urql sea una biblioteca separada. Urql core es el núcleo de la biblioteca, gestionando el flujo. Todo lo demás está en Exchanges, lo que hace que Urql sea modular. Solo importas las partes que necesitas, minimizando las dependencias.

Ok, ahora una pregunta para mí. Mencionaste que Urql es muy, muy pequeño. ¿Cómo logra esto? Porque obviamente, quiero decir, cada paquete, cada biblioteca desearía ser pequeña. ¿Qué hace, cuáles son, qué estás, cuál es el método secreto que estás aplicando para asegurarte de que Urql siga siendo diminuto? Um, creo que eso es algo para preguntarle a Phil. Sí, es magia oscura. Es, es como, así que Phil tiene este pequeño libro negro como sabes, la gente tiene libros negros de números de teléfono y cosas así. Él tiene libros negros de consejos sobre cómo hacer que las bibliotecas sean más pequeñas. Yo también tengo un pequeño libro negro. Me acabo de dar cuenta, pero solo dice, podemos, veamos si la cámara enfoca. No, definitivamente falló. Está bien, dice lista de enemigos. Tal vez si estamos justo al lado de mi cara. Ahí está. Solo quiere estar cerca de tu cara por alguna razón. Sí, exactamente, es como si la detección de rostros fuera muy importante pero en su lugar tiene una nota sobre off zero adentro.

Ok, vayamos a algún lugar. Oh, iba a decir una respuesta más seria a esa pregunta en realidad, en primer lugar, se asegura de que cada uno de los componentes de Urkle sean bibliotecas separadas. Entonces está Urkle core que es como el núcleo de la biblioteca que hace la cosa de Urkle, que gestiona el flujo. Y la vigilancia extrema en lo que se incluye en esa biblioteca. Entonces no tendrías basura que no usarías. Y luego todo lo demás está en Exchanges. ¿Perdón? No tienes LeftPad ahí. No, definitivamente no LeftPad. Sí, entonces todo lo demás está en Exchanges. Entonces Urkle está construido para ser modular. Entonces cualquier cosa que quieras, solo obtienes un exchange para eso. Entonces el núcleo es lo mínimo absoluto que necesitas, por eso es tan pequeño. Y luego lo conectas en su lugar, solo importas las partes que necesitas. Y porque todo está en su propia pequeña biblioteca y también minimizando las dependencias, por lo que no instalarías LeftPad, no instalarías LowDash, por lo que son las dependencias más pequeñas posibles. Sí, eso es prácticamente todo.

Soporte para Rescript y ReasonML

Short description:

Desde Alexander, ¿hay planes para admitir Rescript como lenguaje de uso? Rescript es como han renombrado a ReasonML. Reason es compatible y Rescript llegará pronto.

Sí, voy a elegir otra pregunta de la lista de preguntas, que es una elección parcial y rápidamente te darás cuenta por qué. Desde Alexander, ¿hay planes para admitir Rescript como lenguaje de uso? No he oído hablar de esto. ¿Rescript? Rescript es como han renombrado a ReasonML. Oh. Oops. Uh, yo... No, está bien. Está bien. Lo siento. Mi casa está pasando por un túnel. Y estamos de vuelta. No te preocupes. Sí, aquí no hay nada que ver, gente. Um, oh, entonces... Oh, al parecer Reason es compatible. Y Rescript llegará pronto. Genial. Ahí lo tienes. Um, genial.

Differences between Apollo and Urkel

Short description:

La API de Apollo y Urkel es muy similar, pero no idéntica. UseQuery en Urkel devuelve un array, mientras que Apollo devuelve un objeto, lo que requiere un cambio en la destructuración. Si no estás utilizando caché o tienes una caché personalizada, la implementación básica debería funcionar con pequeños cambios de sintaxis.

Voy a combinar dos preguntas aquí. Espero que no les importe, Nikan y Bastiaan. ¿Hay alguna característica obvia importante que Apollo tiene y que Urkel no tiene, y si estuvieras intentando hacer un reemplazo directo, ¿podrías prever algún cambio que rompa la compatibilidad? Um, entonces no puedes— la API es muy similar, pero no es idéntica. No puedes simplemente, ya sabes, reemplazar UseQuery con UseQuery, de Urkel. Porque creo que si recuerdo correctamente, Urkel devuelve un array desde UseQuery, mientras que Apollo devuelve un objeto. Así que tienes que cambiar la destructuración. Hay una pequeña forma de hacerlo, hay un pequeño cambio en la API, sí, entre ellos. Fuera de eso, déjame pensar. Si no estás utilizando caché, si solo estás haciendo algunas consultas, algunas mutaciones, no tenemos una implementación de caché personalizada ni nada parecido, creo que funcionaría sin problemas. Si tienes una caché personalizada, entonces obviamente la implementación de la caché es ligeramente diferente. La forma en que interactúas con ella es ligeramente diferente. Es un intercambio que agregas, y luego si tienes una caché, y si haces, por ejemplo, actualizaciones sin conexión u optimistas, también necesitas escribir las consultas de actualización para eso. Así que esas podrían ser ligeramente diferentes. Básicamente, si tienes una implementación simple, que son solo algunas consultas y mutaciones, creo que funcionaría prácticamente sin problemas fuera de cambiar ligeramente la sintaxis.

Soporte de bibliotecas y Graphcache en Urql

Short description:

Apoyamos bibliotecas basadas en el interés y la experiencia. Preact es un reemplazo directo de React, y nuestro equipo incluye expertos en Preact. Angular no ha generado mucho interés entre los mantenedores de Oracle. Graphcache de Oracle permite el soporte sin conexión, reflejando la caché del servidor y aplicando actualizaciones en orden. Es un cambio de juego para React Native, permitiendo funcionalidad sin conexión con actualizaciones optimistas. La creación de tutoriales para Graphcache está en los planes.

Genial. Y otra pregunta para mí, ¿cómo eligieron qué bibliotecas apoyar? Teníamos cosas como Preact, por ejemplo, que es un marco web basado en componentes menos utilizado. ¿Cómo se hizo esa lista? ¿Es solo lo que Formidable quería usar en ese momento? ¿O hay más planificación involucrada?

Bueno, creo que, por lo tanto, el soporte de Preact es, bueno, Preact es un reemplazo directo de React, lo que significa que el soporte de Preact es muy fácil de lograr. Entonces, ¿por qué no tenerlo? Además... Y es como, oh sí, también apoyamos Preact, porque técnicamente todos lo hacen. Sí, exactamente. Pero además, Jovi es un mantenedor principal de Preact. Así que también hay experiencia interna para responder a la otra pregunta, ¿cómo nos aseguramos de que nuestros hallazgos del marco sean de calidad? Si alguna vez hay un experto en los hallazgos del marco Preact, sería Jovi. Así que eso fue bastante fácil.

El otro punto de vista, creo que en general, hay simplemente un marco en el que estamos interesados, como fuera de Preact. Y de eso se trata todo eso de los robots. Angular, creo que no hay una gran cantidad de, como no muchos mantenedores de Orcle, pero no ha habido mucho interés en Angular. Sí, el diagrama de Venn donde las personas que quieren usar Oracle y las personas que usan Angular probablemente no se superponen mucho.

Oh, en realidad tenía una respuesta a una pregunta anterior que olvidé mencionar, que se trataba de, creo que no respondí la segunda parte de la pregunta, que se trataba de qué tiene Orcle que Apollo no tiene. Y una de las cosas principales era Graphcache. Entonces, Graphcache está diseñado para poder funcionar sin conexión, lo cual es muy emocionante porque básicamente, con Apollo, su caché es como una especie de gestión de estado. Mientras que con Orcle, la caché de Orcle es como un espejo de la caché del servidor. Por lo tanto, se supone que es tu caché del servidor local y todas las actualizaciones se aplican en el orden correcto. Y sí, básicamente la forma en que está construido desde cero es para poder admitir sin conexión, lo cual me entusiasma mucho para React Native porque creo que definitivamente sería un cambio de juego, lo que significa que si tienes una aplicación con actualizaciones optimistas y usas Graphcache, prácticamente puedes hacer que funcione sin conexión, lo cual es increíble. Sí, no, eso se ve realmente genial. Parece una forma muy inteligente de lidiar con un problema común. He visto tantas implementaciones personalizadas de lo que siempre termina siendo consultas más o menos persistentes. Sí, sí. Quiero decir, he creado algunas implementaciones usando Apollo tratando de lograr el enfoque sin conexión primero, y creo que con Graphcache, es la primera vez que siento que funciona y tengo cierta confianza en la solución. Sí, y tengo planes de crear algunos tutoriales al respecto, así que creo que es algo muy emocionante para React Native. Mm-hmm. De acuerdo, maravilloso. Bueno, creo que hemos respondido todas las preguntas que teníamos, y creo que mi cámara también se está volviendo más espeluznante con el tiempo, así que tal vez deberíamos terminar por ahora y jugar con eso. ¿Hay algo más que te gustaría decir, promocionar? Esta es tu oportunidad de dirigirte a la audiencia. Me encantaría que más personas prueben urql y nos den su opinión.

Soporte de la comunidad y comentarios

Short description:

La sección de la comunidad en el sitio de GitHub es el lugar al que acudir para comentarios y preguntas sobre urql. Prueba urql, publica tus comentarios y responderemos con características planificadas o explicaciones. Dale una oportunidad a urql hoy mismo.

Como saben, siempre menciono la sección de la community en el sitio de GitHub, pero ese es el lugar al que acudir. Prueba urql y piensa, oh, no me gusta porque no hace esta cosa. Solo publica allí y luego podemos responder. Tal vez podamos decir, oh, sí, está planificado. O, no lo estamos haciendo debido a esto. Así que realmente esperamos que la gente lo pruebe y nos dé su opinión.

Bueno, ahí lo tienen. Ahí lo tienen. Dale una oportunidad a urql hoy mismo. Muchas gracias, Cady. Deja tus emojis de aplausos en Discord para nuestra maravillosa presentadora.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.