Quero usar consultas invalidadas, mas elas não são buscadas nem acionadas.
Tenho um dashboard e estou na tela do usuário na navegação. Mudo uma ação na tela do usuário e quero atualizar o painel que está em outro arquivo.
usuário: (Aqui no onSuccess está o invalidateQueries que não é acionado)
const {
isPending,
mutate
} = useMutation({
mutationKey: ["SETTINGS"],
mutationFn: async (params: TMutateSettingsParam) => {
console.log(params);
const res = await axiosPrivate.post(`${URL}/auth/deleteAccountByAdmin`, params, {
headers: headersJSON,
withCredentials: true
});
const data: IReturnApi<null> = res.data;
return data;
},
onSuccess: (data) => {
queryClient.invalidateQueries({queryKey: ['dashboard']})
toast.success(data.message);
},
onError: (err: AxiosError<IReturnApi<IValidationError[]>>, _variables) => {
if(err.response) {
toast.error(err.response.data.message);
} else {
toast.error('Es ist ein Fehler aufgetreten. Bitte wenden Sie sich an den Support.');
}
}
});
Aqui está meu app.tsx
export const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<BrowserRouter>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<App />
</AuthProvider>
</QueryClientProvider>
</BrowserRouter>
</React.StrictMode>,
)
E aqui está minha consulta no painel que desejo invalidar:
const {
isLoading,
isError,
data,
error
} = useQuery({
queryKey: ['dashboard'],
refetchOnWindowFocus: false,
queryFn: async () => {
const res = await axiosPrivate.get(`${URL}/dashboard/getAll`, {
headers: headersJSON,
withCredentials: true
});
const data: IDashboardData = await res.data;
return data;
}
});
O que estou fazendo errado ?
Eu acho que se você deveria usar queryClient.refetchQueries() como descrito aqui . Mas para funcionar corretamente, certifique-se de definir useQuery staleTime como um valor maior que 0. Por exemplo, 5*1000.
Então na sua página de usuário você pode fazer um
queryClient.refetchQueries({queryKey: ['dashboard']})
e quando chegar no dashboard nenhuma nova solicitação será feita.Por padrão, o staleTime que indica se os dados ainda são válidos é definido como zero. Se você não alterar isso, você obterá uma busca usando
queryClient.refetchQueries()
e outra busca ao carregar a página.Você pode ler este guia que descreve todas as coisas importantes que você deve saber sobre a consulta tanstack e staleTime: documentos