Custom Hooks chamados no mesmo componente

Usando o conteúdo do curso, estou criando uma aplicação própria para estudos, e fiz um cadastro de endereços. Isolei em dois custom hooks, um com a busca numa api dos estados e em outro a busca pelo tipo de logradouros. Ambos utilizam o useQuery e axios.

Quando chamos esses hooks no meu componente, a chamada do primeiro é executada mas a do segundo, entra no custom hook, mas não faz a requisição junto a API. No netwok do navegador, só existe a requisição para o primeiro hook declarado no componente. Os dois datas declarados para cada um dos custom hooks, que recebem o json de retorno das apis, são preenchidos pela mesma resposta do primerio hook. Tirando o uso do axios em vez do fetch, tudo foi feito como mostrado pela Patricia, alguém tem idéia do que estou errando?

Olá, Emerson, tudo bem?

O comportamento que você descreveu sugere que ambos os hooks estão usando a mesma chave de cache no useQuery, o que faz com que o React Query considere que eles se referem ao mesmo dado, retornando sempre a mesma resposta da primeira chamada. Para resolver, você pode conferir se cada useQuery está com uma chave exclusiva ao ser utilizado no custom hook, por exemplo:

// Hook 1 - Busca estados
useQuery(["estados"], () => axios.get("/url-estados").then(res => res.data));

// Hook 2 - Busca tipos de logradouro
useQuery(["tiposLogradouro"], () => axios.get("/url-tipos-logradouro").then(res => res.data));

Usando chaves diferentes, como "estados" e "tiposLogradouro", o React Query armazenará os resultados separadamente, evitando o conflito.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Mergulhe em programação