React Query, Filtro y Paginación en Next.js

React Query es un Hooks para fetching, cacheo y actualización asincrona de data en React.js, esto nos ayuda a encapsular procesos de llamados a APIS y acceder a ellos de forma global. Así evitamos estar colocando funciones que ejecuten esta tarea en nuestros componentes, lo cual puede afectar el rendimiento en ciertos puntos.

Sumado a esto, vamos a explicar un par de librerias más: Typeahead que ofrece un componente para filtrar datos de un array y ReactJsPagination que nos permite cambiar datos de control de paginación, en este caso, para ambos puntos aplica para cambiar el estado de los parámetros de la llamada a la API.

Vamos a seguir usando El proyecto de Next.js ya explicado y crearemos nuestra configuración para llamar a la API, una vista y un componente.

La configuración a la API va llamar la función useQuery de ReactQuery que se encarga de retornar la respuesta de axios dentro de la función getUsers. Cabe destacar que también implementamos la libreria sweetalert para que le indique al usuario que ha ocurrido un error cuando no logre ejecutarse el proceso correctamente.

Luego creamos nuestra view users (recordando que Next.js crea automáticamente la ruta la a vista users) y escribimos lo siguiente: Primero llamamos a las librerías que vamos a usar, en este caso cabe destacar que también hemos creado un json (fakedata) que va servir los datos para el filtro. Configuramos el estado que va manejar los parámetros y escribimos la función onUsersChange que se va ejecutar cada vez que el usuario ejecute el filtro.

Después escribimos la función onPaginateChange que se va ejecutar cada vez que el usuario ejecute el paginado, cambiando el valor del page de los parámetros, además validamos que el filtro se muestre solamente cuando los datos que devuelve el API existan. la llamada al API se ejecuta en la linea 30, cuando llamamos la función getUsers y le pasamos los parámetros.

Para finalizar la view le pasamos al componente Users como props la respuesta del API y configuramos nuestro componente de paginación.

Ahora vamos a escribir nuestro componente users: Primero llamamos las librerías que necesitamos y luego validamos que el prop que nos llega sea un Array, por qué? porque tenemos que diferenciar cuando el API nos devuelve toda la data completa y cuando nos devuelve solo un registro (un objeto) para mostrar los datos de un usuario en particular. Además recordemos que en el Post anterior de Next configuramos ciertos procesos que usan este componente, para no romplerlo, hemos escrito nuestro código así:

Cuando el prop que recibimos no es un array tiene dos posibles caminos, o es un objeto (un solo record) o es undefined (por latencia de internet o algún otro elemento que no rompe la petición y pasa con un estatus 200) entonces, en el primer caso renderiza el perfil de un usuario y en el segundo renderiza un Loader, otro compente que hemos implementado.

Para finalizar todo solo agregamos nuestra opción users al nav y listo, PODEMOS VER EL RESULTADO AQUÍ

Para clonar el proyecto, pueden hacerlo AQUÍ

Espero que les sirva, saludos!