He estado trabajando con React Query y React Table recientemente para lograr una estructura de tabla de varios niveles con filas expandibles, donde cada fila debe hacer una carga diferida cuando se hace clic en ella. Es para la jerarquía del grupo de productos, que se ve así:
unit-1 (clicking fetches category data lazily) category-1 (clicking fetches product data lazily) product-1 product-2 category-2 product-3 unit-2 category-3 product-4 product-5Tengo dos opciones para la solución:
Ejemplo de carga diferida de subcomponentes para React Table ( https://react-table.tanstack.com/docs/examples/sub-components-lazy ) Esto se enfoca en un solo nivel de profundidad, por lo que no estoy seguro de cómo hacerlo múltiple -level debido a que todavía no estoy muy familiarizado con la API de React Table y parece que el ejemplo no fue creado con ese propósito. Intenté hacerlo de varios niveles, pero tuve dificultades para pasar algunas propiedades de fila como (.isExpanded, .id, etc.)
Una publicación sobre cómo manipular los datos con cada clic de fila para que la tabla maneje automáticamente el resto ( https://nafeu.medium.com/lazy-loading-expandable-rows-with-react-table-cd2fc86b0630 - GitHub ex: https ://github.com/nafeu/react-query-table-sandbox/blob/main/src/ReactTableExpanding.jsx ) Esta parece ser una forma más declarativa de manejar las cosas. (Obtenemos nuevos datos, los fusionamos con los datos existentes y el resto se maneja) pero tengo algunas preocupaciones, como si la actualización de los datos de la tabla completa genera renderizaciones innecesarias. Otra cosa es que, dado que aquí no representamos un subcomponente como en el primero, el extremo de la API debe organizarse para que funcione con un evento de clic. No es como tener un subcomponente responsable de obtener sus propios datos cuando está montado.
Como nota para el ejemplo de la tabla anterior, estaba planeando usar un punto final de API único que toma parámetros como:
?level=root&id=0 (initial units list data for the table on page load) ?level=unit&id=2 (returns categories of unit-2) ...Pero esta lógica no parece suficiente para admitir la recuperación al hacer clic en la fila, así que supongo que necesitaré al menos dos puntos finales si sigo el segundo enfoque.
¡Gracias por leer, y cualquier idea es bienvenida! Que tengas un lindo día.
Como actualización, podría hacer que las cosas funcionen principalmente con la segunda opción anterior. Como nota sobre los puntos finales de la API, podría usar el mismo punto final de la API y el mismo gancho dos veces con diferentes parámetros. (esta parte es un poco específica del proyecto, por supuesto, pero tal vez les dé una idea a los que tienen escenarios similares)
Para obtener los datos iniciales de la tabla, doy parámetros codificados al enlace, de modo que la tabla se represente con los datos iniciales al cargar la página.
const { data: initialData, isLoading } = useGetLevels( { level: 'root', id: [0], ... } );En el segundo, uso enable: false, y cuando se hace clic en una fila, llamo a refetch(), por lo que se obtienen datos adicionales y se fusionan con los datos iniciales para actualizar la tabla y la fila se expande en consecuencia:
const { data: partialData, refetch, } = useGetLevels( { level, id, ... }, false );y los useGetLevels se ven así:
function useGetLevels( filterParams, enabled ) { return useQuery( ['levels', filterParams], () => fetchLevels(filterParams), { enabled, } ); }