Tengo una aplicación muy básica en la que intento obtener algunos datos y actualizar el caché. Por ejemplo, traté de actualizar los datos a una matriz vacía, pero en las herramientas de desarrollo y los registros de la consola sigo obteniendo los datos antiguos.
function App() { const queryClient = new QueryClient(); const { isLoading, error, data } = useQuery('repoData', fetcher, { onSuccess: (data) => { queryClient.setQueryData('repoData', () => []); }, }); console.log('data', data); return ( <div className="App"> <Home /> </div> ); }¿Cuál sería la forma correcta de actualizar el caché?
¿Por qué querrías actualizar la memoria caché del mismo elemento que acabas de obtener con éxito? React-Query colocará el resultado del fetcher en el campo de datos devuelto por useQuery; no necesita hacer nada en onSuccess para eso
Ese es un ejemplo de la documentación oficial.
const queryClient = useQueryClient() const mutation = useMutation(editTodo, { onSuccess: data => { queryClient.setQueryData(['todo', { id: 5 }], data) } }) mutation.mutate({ id: 5, name: 'Do the laundry', }) // The query below will be updated with the response from the // successful mutation const { status, data, error } = useQuery(['todo', { id: 5 }], fetchTodoById)https://react-query.tanstack.com/guides/updates-from-mutation-responses
Los datos resueltos desde su función de fetcher el caché de react-query con la query key elegida.
Estos datos están disponibles cuando se desestructura el useQuery o están disponibles con la devolución de llamada onSuccess .
Puede ser útil actualizar manualmente los datos como se muestra aquí: https://stackoverflow.com/a/68949327/1934484
// fetcher function function getProducts() { // http call const { data } = await http.get<{ products: ProductT[] }>(/products); return data.products; } // data returned will be an array of products const { data } = useQuery('products', getProducts, { onSuccess: (data) => { // data returned will be an array of products }, });