Tengo una aplicación React que usa React Query para cargar un conjunto de datos de folders que contienen items . La aplicación permite al usuario arrastrar/ordenar elementos (dentro de una carpeta y arrastrarlos a otra carpeta). Antes de implementar arrastrar/ordenar, era simple, RQ buscaba el conjunto de datos folderData y luego el padre proporcionaba datos a los componentes secundarios: padre > folder > item .

Para implementar arrastrar/ordenar, ahora tengo que copiar todo el conjunto de datos folderData en una variable de estado del cliente foldersLocal . Esta es la única forma en que pude averiguar cómo cambiar la interfaz de usuario cuando el usuario mueve un elemento.

Sin embargo, siento que este enfoque esencialmente elimina la mayoría de los beneficios de usar React Query porque tan pronto como se obtienen los datos, copio todo el conjunto de datos en una variable de estado del "lado del cliente" ( foldersLocal ) y solo trabajo con él. Esto también hace que la funcionalidad QueryClientProvider efectivamente inútil.

¿Hay una mejor manera de abordar esto? ¿O me estoy perdiendo algo?

 // Fetch data using React Query const {isLoading, isError, foldersData, error, status} = useQuery(['folders', id], () => fetchFoldersWithItems(id)); // Place to hold client-state so I can modify the UI when user starts to drag/sort items const [foldersLocal, setFoldersLocal] = useState(null); // Store React Query data in client-state everytime it's fetched useEffect(() => { if (status === 'success') { setFoldersLocal(foldersData); } }, [foldersData]); // Callback to change "foldersLocal" when user is dragging an item const moveItem = useCallback((itemId, dragIndex, hoverIndex, targetFolderId) => { setFoldersLocal((prevData) => { // change data, etc. so the UI changes } } // Drastically simplified render method return ( <QueryClientProvider client={queryClient}> <FolderContainer folders={foldersLocal} moveItem={moveItem} moveItemCompleted={moveItemCompleted}/> </QueryClientProvider> )