Patrones Avanzados para la Gestión de API en Aplicaciones React a Gran Escala

Rate this content
Bookmark

En esta charla, descubrirás cómo gestionar operaciones asíncronas y cancelación de solicitudes implementando una capa de API mantenible y escalable y mejorándola con lógica de cancelación desacoplada. También aprenderás cómo manejar diferentes estados de API de manera limpia y flexible.

20 min
25 Oct, 2021

Video Summary and Transcription

Esta charla cubre patrones avanzados para la gestión de API en aplicaciones React a gran escala. Introduce el concepto de una capa de API para gestionar solicitudes de API de manera más organizada y mantenible. Los beneficios de utilizar una capa de API incluyen una mejor mantenibilidad, escalabilidad, flexibilidad y reutilización de código. La charla también explora cómo manejar estados y estados de API en React, y proporciona ejemplos de cancelación de solicitudes con Axios y React Query. Además, explica cómo utilizar la capa de API con React Query para una gestión simplificada de API.

Available in English

1. Introduction to API Management in React

Short description:

Bienvenido a Patrones Avanzados para la Gestión de API en Aplicaciones React a Gran Escala. Hoy, cubriremos la gestión de solicitudes de API en React, el manejo de diferentes estados de API, la creación de hooks personalizados, la cancelación de solicitudes con Axios y React Query. Realizar solicitudes de API en React puede llevar a la duplicación de código y la falta de reutilización. Para solucionar esto, podemos implementar una capa de API. Al crear un archivo base de API e importarlo en otros archivos de API, podemos gestionar las solicitudes de API de una manera más organizada y mantenible.

Hola, y bienvenido a Patrones Avanzados para la Gestión de API en Aplicaciones React a Gran Escala. Mi nombre es Tomasz Fienli y soy un desarrollador web y móvil full-stack con nueve años de experiencia en programación. Soy co-propietario de Fienli web tech y mentor y consultor en CodeMentor.io. También soy autor de los libros Vue y React the Road to Enterprise, así como escritor técnico para Telerik y los blogs Road to Enterprise. Ahora, veamos qué vamos a cubrir hoy. Así que, en primer lugar, comenzaremos con cómo gestionar las solicitudes de API en React de manera escalable y flexible con una capa de API. Luego veremos cómo manejar diferentes estados de API al realizar solicitudes de API. También crearemos hooks personalizados para gestionar las solicitudes y estados de API, así como cómo cancelar solicitudes con Axios y una capa de API. Por último, veremos cómo usar React Query y una capa de API y cómo cancelar solicitudes con ellos.

Ok, entonces, ¿cómo podemos realizar solicitudes de API en React? En realidad, es bastante simple, ¿verdad? Podemos, por ejemplo, usar Axios para eso. Solo tenemos que importarlo y usarlo en nuestros componentes. Y, bueno, puede funcionar bien para, digamos, aplicaciones pequeñas. Pero hay algunos problemas a medida que el proyecto crece, especialmente los grandes. Entonces, ¿cuáles son los principales problemas con este enfoque? En primer lugar, la duplicación de código y la falta de reutilización. Porque imagina que necesitamos, por ejemplo, obtener información sobre un usuario, digamos en la página de inicio de sesión, página de registro y página de perfil de usuario. Todos estos tendrían el mismo fragmento de código. Axios obtiene un punto final de URL y así sucesivamente, ¿verdad? Entonces, eso no es realmente reutilizable. Y también, es difícil de mantener. Porque si tuviéramos que hacer algún cambio en este código, como por ejemplo, cambiar el punto final de URL o cambiar el formato de carga útil, o digamos, tuviéramos que migrar de usar Axios a algo como Firebase, ¿necesitaríamos visitar cada componente individual que usa Axios y cambiarlos? Bueno, eso no es realmente genial, para ser honesto. Entonces, veamos cómo podemos solucionar estos problemas implementando una capa de API. Entonces, primero, comenzaríamos con un archivo base de API, donde importaríamos Axios y crearíamos una nueva instancia con alguna configuración predeterminada, como, por ejemplo, una URL base. Luego tenemos una función de API que básicamente devuelve métodos de envoltura de API alrededor de nuestro cliente Http, en este caso, Axios. Y finalmente, lo exportamos. A continuación, podemos usar este archivo base de API e importarlo en otro archivo de API. Entonces, por ejemplo, en este caso, tendríamos un archivo de API de usuarios. Porque queremos hacer algunas cosas con los usuarios, como obtener información sobre los usuarios, agregar un nuevo usuario, etc. En este ejemplo, tenemos tres métodos, listar usuarios, obtener usuario y agregar usuario. Y como puedes ver, todos utilizan los métodos de API del archivo base de API. ¿Y cómo lo usaríamos en un componente ahora? Básicamente, lo que haríamos es importar un método de API del directorio de API,

2. API Layer Benefits and Flexibility

Short description:

La capa de API en React te permite abstraer los detalles de los puntos finales de la API y cambiar fácilmente entre diferentes clientes HTTP. Al separar la lógica de la API en una capa separada, tus componentes permanecen agnósticos a la implementación subyacente. Esto mejora la mantenibilidad, escalabilidad y flexibilidad. Puedes agregar fácilmente nuevos métodos de API, reemplazar el cliente HTTP y mejorar la capa de API con lógica personalizada. También se incrementa la reutilización de código, ya que los métodos de API se pueden importar y utilizar en cualquier parte de la aplicación. El patrón de la capa de API es independiente del framework, lo que lo hace adecuado para diversos entornos de desarrollo.

Y luego simplemente lo usas en un componente. Entonces, como puedes ver, el componente no tiene que preocuparse por qué tipo de punto final de API debe ser llamado, ¿verdad? El método de API se encarga de eso. ¿Y qué pasa si queremos usar un cliente HTTP diferente, como por ejemplo, Firebase en lugar de Axios? Entonces, nuestro archivo base de API se vería un poco diferente. Aquí, simplemente importaríamos algunos métodos necesarios de Firebase, inicializaríamos la aplicación de Firebase y exportaríamos lo que necesitamos, por ejemplo, Firebase Firestore, que nos proporciona métodos para, básicamente, conectarnos con la base de datos, y así sucesivamente, y otras cosas como funciones de almacenamiento, etc. Ahora, en el archivo de API de usuarios, tendríamos nuevamente los mismos métodos, como listar usuarios, obtener usuario y agregar usuario. Sin embargo, en este caso, estamos utilizando Firebase, por supuesto, en el fondo. Pero veamos cómo se vería desde la perspectiva de los componentes. Bueno, en realidad, para el componente, nada cambiaría, porque seguiría importando el método de API del archivo de API de usuarios y simplemente lo ejecutaría, ¿verdad? Así que eso es realmente genial de la capa de API, porque es como una caja negra para tus componentes. Porque tus componentes realmente no tienen que preocuparse por qué usas para realizar las solicitudes. Solo se preocupan por qué métodos deben llamar, qué tipo de entrada deben proporcionar y qué tipo de salida pueden esperar. Mientras puedas mantener este contrato de entrada y salida, no necesitas hacer ningún cambio en tus componentes. Solo necesitas hacer cambios en la capa de API, realmente. Ahora, veamos los beneficios de la capa de API. En primer lugar, la mantenibilidad, ya que todo el código relacionado con la API está en un solo lugar. Escalabilidad, ya que puedes agregar fácilmente nuevos métodos y archivos de API. Y también tenemos flexibilidad, es mucho más fácil reemplazar el cliente HTTP y también mejorar la capa de API con lógica personalizada. Como acabas de ver, reemplazamos Axios con Firebase y no necesitamos hacer ningún cambio en el componente. También la reutilización de código, porque los métodos de API se pueden simplemente importar y utilizar en cualquier parte de la aplicación. Y el patrón de la capa de API también es independiente del framework.

3. Handling API States in React

Short description:

Veamos cómo manejar los estados de la API en las aplicaciones de React. El uso de banderas booleanas para cada estado puede llevar a la duplicación de código y complejidad. Podemos mejorar esto utilizando estados de API e implementando un hook llamado useApiState. Los cuatro estados de la API son Idle, Pending, Success y Error. Al abstraer los estados, podemos gestionar las solicitudes de API de manera más eficiente.

Ok, ahora veamos cómo podemos manejar los estados de la API. Lo que he visto en muchas aplicaciones es básicamente el uso de banderas booleanas. Por ejemplo, si queremos mostrar un spinner, tendríamos una bandera isLoading. Si queremos mostrar un error, por ejemplo, si la solicitud falló, tendríamos una bandera isError. Y veamos si queremos inicializar una solicitud más tarde. Por ejemplo, si un usuario hace clic en un botón o si un usuario se desplaza hasta cierto elemento, también podemos tener una bandera isInitialized. Como puedes ver aquí, tenemos tres estados diferentes y luego todos se actualizan en consecuencia.

El problema, sin embargo, y como puedes ver aquí, si se inicializó, mostraría un botón. Si está cargando, mostramos un mensaje de carga de datos, canDisplaySpinner. Si hubo un error, entonces hubo un problema. Y finalmente, si todo salió bien, estamos mostrando los datos. Pero sí, el problema es que para cada estado de la API, necesitamos un nuevo hook de estado, ¿verdad? Porque tenemos inicializado, está cargando, hay un error. Eso ya son tres estados. Eso es solo para una solicitud de API. Si necesitamos hacer dos solicitudes, podríamos necesitar seis estados. Si necesitamos hacer tres solicitudes, podríamos necesitar nueve, y así sucesivamente. Pero eso no es realmente genial.

Entonces veamos cómo podemos mejorarlo utilizando estados de API en su lugar. Y también implementaremos un hook llamado useApiState para ayudarnos con eso. Primero que nada, tenemos cuatro estados de API diferentes. Idle, que significa que básicamente la solicitud aún no ha comenzado. Y tenemos pending, que significa que la solicitud se está realizando. Y luego también tenemos success y error. Obviamente, success es cuando la solicitud se completó correctamente y error si hubo un problema. También tenemos una matriz aquí, que básicamente exporta las constantes, ya que las necesitaremos en un momento. Ahora vayamos a useApiState. Primero que nada, necesitamos importar useState y useMemo. Y también obtenemos la constante idle, que es nuestro estado inicial para el hook. Y también obtenemos los estados predeterminados.

4. Managing API Statuses in React

Short description:

Podemos usar el hook useApiStateUseHook para gestionar los estados de la API en React. Al utilizar este hook, podemos tener un solo estado que contenga todos los estados de la API, como idle, pending, success y error. Podemos actualizar fácilmente el estado de la API utilizando el método setApiStatus. Al implementar un hook personalizado useAPI, podemos mejorar aún más la gestión de la API en React. Este hook acepta un método para ejecutar solicitudes de API y un objeto de configuración para establecer datos iniciales en el estado.

y luego devolver un objeto con los estados, como idle, pending, success, error, como puedes ver en el lado derecho de la diapositiva. Y solo uno de ellos estará activo en el momento. Por ejemplo, al principio, solo isIdle se establecerá en true.

Y ahora, aquí está nuestro useApiStateUseHook. Así que tenemos nuestro estado para ello. En comparación con las banderas booleanas, tenemos solo un estado que contiene todos los estados de la API. Y solo uno de ellos puede estar activo al mismo tiempo. Luego, tenemos el resultado de prepareStateUses. Como mencioné, es un objeto que tiene idle, pending, y así sucesivamente. Y usamos useMemo aquí para que solo se vuelva a evaluar si el estado de la API cambia. Y finalmente, devolvemos un objeto con apiStatus, el método setApiStatus, y todos los estados normalizados.

Ahora, veamos cómo podemos usarlo. Como puedes ver aquí, básicamente inicializamos el hook useApiStatus, y podemos pasar idle allí, aunque de todos modos es el estado predeterminado. Si quisiéramos comenzar con pending de inmediato, puedes hacerlo. Y luego desestructuramos todos los estados, así como el método setApiStatus, que luego se utiliza para actualizar este estado de la API en consecuencia. Antes de que se inicie la solicitud, lo establecemos en pending. Si se completa correctamente, lo establecemos en success. Si hay un problema, lo establecemos en error. Y como puedes ver en el marcado, básicamente podemos agregar ternarios, ¿verdad? Si está idle, entonces hacemos algo. Si está pending, entonces mostramos el spinner o el mensaje de carga. Si hay un error, mostramos un error, y así sucesivamente. Así que de esta manera es mucho más limpio. No necesitamos tener tantas banderas booleanas. Y el código es mucho más limpio y conciso.

Entonces ahora veamos cómo podemos mejorarlo aún más al implementar un hook personalizado useAPI. Primero que nada, importamos useState nuevamente, así como el hook useApiStatus que acabamos de cubrir, y tres apiStatuses. Entonces useAPI acepta dos parámetros. El primero es el método que ejecutará una solicitud de API, y el segundo es un objeto de configuración. Por ejemplo, en este ejemplo, podemos pasar datos iniciales dentro del objeto de configuración y establecerlo en el estado para los datos.

5. Managing API States and Requests

Short description:

Dentro del hook useAPI, la función exec se encarga de establecer los estados de la API, actualizarlos según el estado de la solicitud y gestionar los estados de datos y errores. El hook useAPI devuelve un objeto con datos, estado de la API, error y método exec.

Además del estado de data, también tenemos un estado para el error y, por supuesto, inicializamos el hook useApiStatus. Ahora, dentro del hook useAPI, tenemos la función exec. Como puedes ver, lo que hace es encargarse de establecer los estados de la API y actualizarlos según corresponda, dependiendo del estado de la solicitud. También se encarga de establecer los data después de que la solicitud se haya completado correctamente, y también manejará el establecimiento del error si hubo algún problema, y lo eliminará si se supone que se debe iniciar la solicitud nuevamente. Y finalmente, el método exec devuelve un objeto con data y error si necesitamos manejarlos. Y por último, pero no menos importante, simplemente devolvemos todo desde el hook useAPI: data, estado de la API, error, exec, y así sucesivamente.

6. Using the API Hook and Canceling Requests

Short description:

Para usar este hook, impórtalo y pasa el método que ejecuta la solicitud de la API. El hook devuelve un objeto con los estados de la API, los datos y un método exec. Dependiendo del estado, se devuelve el marcado apropiado. Para cancelar solicitudes con Axios y la capa de API, mejora la capa de API con lógica de cancelación. El método withAbort acepta un método de Axios y devuelve una función. La función crea un método de cancelación y un token, mejora el objeto de configuración y ejecuta la solicitud. Si hay un error, el método isCancel verifica si la solicitud fue cancelada. Envuelve los métodos del envoltorio de API con abort para completar la configuración. Por ejemplo, en una función de cuadro de búsqueda, se puede realizar una solicitud de API para el autocompletado.

Y ahora, ¿cómo podemos usar este hook? Entonces, obviamente, necesitamos importarlo y luego simplemente pasar el método que se supone que ejecuta la solicitud de la API. En este caso, estamos pasando un método que simplemente devolverá el resultado de getUser, que obviamente proviene de la capa de API. Y desde useAPI, recibimos un objeto del cual extraemos los estados normales, los datos y el método exec. Y como puedes ver en el JSX, nuevamente, dependiendo del estado, simplemente devolvemos el marcado apropiado. Así que, ya sabes, para cada estado idle, el botón para iniciar la búsqueda, para el estado de carga el spinner, y así sucesivamente.

Ok, ahora, ¿cómo podemos cancelar solicitudes cuando usamos Axios con la capa de API? En realidad, podemos mejorar la capa de API con lógica de cancelación. En el archivo base de la API, agregaríamos el método withAbort que primero aceptaría la función. Esta función sería uno de los métodos de Axios, como Axios.get, Axios.put, post, y así sucesivamente. Luego, withAbort devuelve una función, que básicamente estos argumentos deberían ser los que se pasan al método de Axios. Entonces, por ejemplo, URL, body y config. Y lo que estamos haciendo allí es que necesitamos acceder a la configuración original. Y la razón de esto es porque como parte de esta configuración, queremos pasar una propiedad de cancelación, que debería tener una función como valor. Y lo que estamos haciendo aquí, si abort es una función de hecho, entonces creamos un nuevo método de cancelación y el token de cancelación usando el método source de Axios, y en el objeto de configuración, asignamos este token de cancelación, y finalmente, ejecutamos el método abort y pasamos el cancelador allí. Y verás lo que hicimos en un momento. Y finalmente, después de mejorar el objeto de configuración, simplemente ejecutamos la solicitud. Reenviamos todos los parámetros excepto el último. La razón de esto es porque no queremos pasar la configuración original con la propiedad de cancelación, sino que queremos pasar nuestro propio objeto de configuración mejorado que no tiene la propiedad de cancelación pero podría tener un token de cancelación. Y ten en cuenta que es importante que usemos await aquí porque si hubo un error... Básicamente, sin await, este error no se capturaría en el contexto de withAbort. Y por eso necesitamos await aquí. Y luego, finalmente, si hay un error, usamos el método isCancel de Axios para verificar si la solicitud fue cancelada. Y si lo fue, básicamente establecemos una propiedad de abortado en el objeto de error y simplemente lanzamos el error nuevamente para que se pueda manejar externamente. Así que... Ok, una cosa más. También necesitamos envolver, por supuesto, nuestros métodos de envoltorio de API con abort. Como mencioné antes, primero pasamos los métodos de Axios y luego lo inicializamos nuevamente y reenviamos todos los parámetros.

Ok, así es como podemos usarlo. Imagina básicamente una función como un cuadro de búsqueda. Por ejemplo, el usuario puede ingresar alguna consulta y se realizará una solicitud de API para obtener información. Por ejemplo, para el autocompletado.

7. Storing Cancellers and Handling Errors

Short description:

Para almacenar el método de cancelación entre las re-renderizaciones, utilizamos la referencia. El operador de encadenamiento opcional garantiza que el método de cancelación se ejecute si existe. La propiedad abort en el objeto de configuración recibe el método de cancelación como argumento y lo asigna a la referencia. La declaración catch verifica si se canceló el error. Los detalles de implementación del cliente HTTP están abstraídos y solo necesitamos proporcionar la propiedad abort.

Entonces tenemos dos estados, uno para los datos que se obtendrán de la API y otro para la consulta que ingresa el usuario. También tenemos la referencia de búsqueda, que es una parte importante aquí. Porque lo que necesitamos es poder almacenar el método de cancelación entre las re-renderizaciones, ¿verdad? Por eso lo pondremos en la referencia. Pero primero, echemos un vistazo a la función onQueryChange.

¿Qué sucede aquí? Bueno, obviamente establecemos el valor de entrada en la consulta, pero eso no es realmente lo importante aquí. Pero aquí, antes de que se inicialice la solicitud, intentamos cancelar la anterior. Sin embargo, puede que no haya métodos de cancelación cuando se inicializa onQueryChange por primera vez. Por eso usamos el operador de encadenamiento opcional. Básicamente, si hay un método de cancelación, se ejecuta. Pero si no lo hay, está bien. No nos importa, pero no queremos que el motor de JavaScript genere un error aquí, ¿verdad? Por eso usamos el operador de encadenamiento opcional. Y luego, como parte de la configuración, pasamos la propiedad abort que recibe una función. Y el método de cancelación se pasa como primer argumento. Y luego podemos asignar este método de cancelación en la referencia. Entonces, cuando se inicialice nuevamente onQueryChange, tendremos acceso a este método de cancelación. Y finalmente, en la declaración catch, verificamos si se canceló el error. Y lo fue. Y lo realmente genial de la forma en que está implementado es que básicamente los detalles de implementación del cliente HTTP, que se accede en este caso, no se filtraron en nuestro componente en absoluto. No tuvimos que importarlo en ningún lugar. En cambio, solo tenemos que proporcionar la propiedad abort. Y ahí es donde obtenemos el método de cancelación. Lo establecemos en la referencia y listo, está disponible para nosotros. Y simplemente podemos llamarlo.

8. Using the API Layer with React Query

Short description:

Usar la capa de API con React Query es simple. Importa el método de la API y el gancho necesario de React Query, como useQuery. Pasa la clave de la consulta y el método de la API, luego desestructura los datos requeridos, el método de refetch y los estados. Renderiza el contenido según el estado.

De acuerdo, ahora veamos cómo podemos usar la capa de API con React Query. Pero en realidad, es bastante simple, porque lo único que necesitamos hacer es importar el método de la API desde la capa de API. También importar el gancho que necesitamos de React Query, como por ejemplo, useQuery en este caso. Y luego simplemente lo usamos. ¿Verdad? Pasamos la clave para la consulta, luego pasamos nuestra lista. Bueno, en este caso, lista de usuarios. Así que el método de la API. Y simplemente desestructuramos lo que necesitamos. Por ejemplo, en este caso, obtenemos los datos. Obtenemos el método de refetch, que se puede usar para inicializar la solicitud. Y también obtenemos nuestros estados normales. Nuevamente, esta parte es básicamente la misma que con nuestro propio gancho useAPI, ¿verdad? Y según el estado, renderizamos el contenido apropiado. ¿Y cómo podemos cancelar una solicitud cuando usamos la capa de API con React Query? Bueno, nuevamente, podemos pasar una propiedad abort. Sin embargo, esta vez, lo que estamos haciendo es que no estamos usando una referencia, sino que tenemos una variable de cancelación, y asignamos este método de cancelación que se pasó a través de la propiedad abort a esta variable de cancelación. Porque lo que sucede es que la forma en que React Query funciona es que espera que haya una propiedad de cancelación disponible en la promesa que se devuelve. Por eso necesitamos hacerlo de esta manera. Pero también es muy conciso y limpio. Y finalmente, si queremos cancelar la solicitud, solo necesitamos llamar a cancelQueries. Eso es todo por hoy. Aquí están los enlaces al repositorio de Github con ejemplos de código completos, diapositivas para esta charla y sitios web donde puedes encontrarme. Además, tengo un regalo especial para todos los asistentes a la conferencia. React the Road to Enterprise llegará en diciembre. Es un libro avanzado con las mejores prácticas, patrones y técnicas que cubre muchos conceptos diferentes, como la arquitectura de proyectos escalables, la gestión de estado local y global, el manejo de API de prueba, la optimización de rendimiento, SSG y SSI con Next.js, y más. Puedes obtener un 35% de descuento con el código REACTADVANCED. Bueno, espero que hayas disfrutado esta charla y ¡feliz codificación!

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

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
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

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
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.
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Node Congress 2022Node Congress 2022
98 min
Database Workflows & API Development with Prisma
WorkshopFree
Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database.
Table of contents:
- Setting up Prisma, data modeling & migrations- Exploring Prisma Client to query the database- Building REST API routes with Express- Building a GraphQL API with Apollo Server
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.