Se você já trabalhou com react-query provavelmente já se deparou tentando entender a diferença entre o staleTime e o cacheTime e, mais importante, o porque sua aplicação continuar fazendo chamadas ao servidor mesmo você mudando os valores deles.
Vou tentar explicar da forma mais breve possível para você poder voltar a trabalhar.
Estado inicial
A sua aplicação ainda não fez nenhuma chamada ao servidor, neste caso, quando o hook for chamado, ele vai apenas buscar os dados no servidor e salvar no cache.
Agora, o que acontece quando o hook já tiver sido chamado ao menos uma vez e tento chamá-lo novamente? Bem, depende das seguintes situações.
Situação 1
staleTime = 0
cacheTime = 5 min
Como o seu cache está configurado para 5 minutos, o react-query vai devolver os dados prontamente, entretanto, nesta primeira situação, como o staleTime é 0 os dados sempre serão obsoletos, portanto o react-query fica encarregado de fazer uma requisição em background para o servidor e atualizar os dados da query quando possível.
Situação 2
staleTime = 5 min
cacheTime = 5 min
Semelhante à primeira situação, o react-query vai
devolver os dados prontamente, porém, dessa vez o staleTime difere de 0, logo o react-query não vai fazer nenhuma chamada em background, afinal o seu dado não está obsoleto
Lembrando que, o cache mencionando aqui é apenas na memória do navegador, se o usuário recarregar a página o cache vai ser limpo, voltando para a situação inicial
Em ambas situações considerei o tempo entre a primeira e a segunda chamada do hook menor que cinco minutos, visto que em ambas, quando o tempo entre as chamadas é maior que cinco minutos, o react-query não utiliza o cache.
Espero que essa explicação rápida tenha conseguido sanar as suas dúvidas em relação ao assunto
Top comments (0)