Atualizando listas automaticamente com React Query
Evite depender do F5: aprenda a atualizar listas dinamicamente após criar novos registros com TanStack React Query.
Por que isso é importante
Integrar criação de dados com a atualização imediata da interface é essencial para entregar uma experiência fluida aos usuários. Muitas vezes, esquecemos de atualizar a lista dinamicamente e dependemos de um F5, o que compromete a usabilidade.
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 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 export const queryKeys = { getRooms: ['get-rooms'] 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.