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
useQuery com uma queryKey definida, como ['get-rooms'] .onSuccess na configuração da mutation.onSuccess , chame queryClient.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 <code>invalidateQueries</code> , 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 <code>QueryClient</code> usando o hook <code>useQueryClient</code> , provido por <code>@tanstack/react-query</code> .
Info
Você pode reutilizar <code>queryKey</code> definindo-a em um arquivo constante como <code></code> 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.