No quiero que mis componentes siempre vuelvan a recuperar cuando se montarán y ya tienen la consulta en el caché, así que lo hice:
export const App = ({ props }) => { const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchOnMount: false, }, }, }) return (<QueryClientProvider client={queryClient}>{...restOfMyApp}</QueryClientProvider>) } Cuando guardé alguna configuración, traté de invalidar mi consulta con la primera clave y con queryClient.invalidateQueries() . En las herramientas de desarrollo de React-Query, mostró que la consulta está invalidada, pero solo mantiene los mismos resultados y no recupera la consulta.
¿Cómo puedo invalidar la consulta que se recuperará, pero no tengo que iniciar la consulta cada vez que se monta el componente?
¡Gracias por tu ayuda!
si su consulta está activa, debe recuperarse con invalidateQueries . Si no está activo, como han mencionado otros, establezca refetchInactive: true .
¿Cómo puedo invalidar la consulta que se recuperará, pero no tengo que iniciar la consulta cada vez que se monta el componente?
A menudo, el almacenamiento en caché se describe mejor con un enfoque basado en el tiempo, por lo que la mejor solución para desactivar las banderas sería establecer un staleTime para definir cuánto tiempo serán válidos sus datos, en lugar de definir ciertos puntos donde desea / no quiero una recuperación.
si establece staleTime para su consulta en, por ejemplo, 20 minutos, ninguno de los eventos de recuperación (onMount, onWindowFocus, onReconnect) activará una recuperación en ese período de tiempo. invalidarlo manualmente aún lo recuperará.
Esto también estaría en línea con la forma en que funciona el almacenamiento en caché HTTP (piense: Cache-Control: max-age=60 )
para representar: buscar una vez, luego nunca más (a menos que se recolecte basura), establecer staleTime: Infinity .
Parece que hay un error en su código; ¿Podría mostrar cómo está invalidando el caché y sus claves de caché?
El uso refetchInactive definitivamente debería resolver el problema por usted (énfasis mío):
Cuando se establece en
true, las consultas que coinciden con el predicado de recuperación y no se procesan a través de useQuery y amigos se marcarán como no válidas y también se recuperarán en segundo plano.
Aquí hay una demostración rápida de stackblitz .
const client = useQueryClient(); client.invalidateQueries(YOUR_CACHE_KEY, { refetchInactive: true });