Atualizando listas automaticamente com React
Evite depender do F5: aprenda a atualizar listas dinamicamente após criar novos registros com TanStack React Query.
Por que isso é importante
Atualizando listas automaticamente com React. Evite depender do F5: aprenda a atualizar listas dinamicamente após criar novos registros com TanStack React Query.
O problema: dados não atualizam após criação
Imagine que você está desenvolvendo uma interface onde o usuário pode criar novas salas.
Ao clicar no botão "Criar Sala", o item é criado com sucesso no backend, mas não aparece
automaticamente na listagem da sua interface à direita — obrigando o usuário a atualizar
a página manualmente.
Causa: chamada de query sem revalidação
Isso acontece porque, mesmo após a criação, a lista exibida continua se baseando em
dados antigos. Ela não sabe que algo novo foi adicionado no backend e por isso não se
atualiza. Mesmo com o sucesso da mutation, nada força a reexecução da query.
Solução com React Query: invalidateQueries
Em aplicações usando TanStack React Query, podemos resolver isso invalidando a query
manualmente após a mutation dar certo. Isso “expira” os dados antigos e força o useQuery
a fetchar novamente.
Passo a passo para implementar
- Passo 1: Certifique-se de que sua listagem use
useQuerycom uma queryKey definida, como['get-rooms']. - Passo 2: Na mutation responsável por criar novas salas,
adicione a funçãoonSuccessna configuração da mutation. - Passo 3: Em
onSuccess, chamequeryClient.invalidateQueries(['get-rooms']), garantindo que a
listagem será refetchada automaticamente.
Atenção
Se a chave da query usada na listagem for diferente da passada em invalidateQueries , o refetch não será disparado. Mantenha consistência
entre os nomes.
Importando e usando o QueryClient
Para invalidar a query, é necessário acessar a instância do QueryClient usando o hook useQueryClient , provido por @tanstack/react-query .
Info
Você pode reutilizar queryKey definindo-a em um arquivo constante como para evitar typos.
Refinando com resets e mensagens
Após a criação da sala e o refetch automático da lista, aproveite também para resetar os
formulários e dar feedbacks ao usuário, como mensagens de toast de sucesso.
Sucesso
Com a implementação correta, assim que uma nova sala for criada, ela aparecerá
automaticamente na sua interface, sem a necessidade de atualizar a página.
Checklist de Implementação
- Definiu corretamente o queryKey no useQuery da listagem
- Utilizou useQueryClient para acessar o client
- Disparou invalidateQueries após onSuccess da mutation
- Testou a atualização dinâmica sem recarregar a página