Tanstack Query skill

O que ela faz

Guia o uso do TanStack Query v5, a biblioteca que busca, guarda em cache e sincroniza os dados que vêm do servidor. Traz a instalação do @tanstack/react-query, a configuração do QueryClient e os padrões de useQuery e useMutation, com chaves organizadas em hierarquia pra invalidar tudo de um assunto de uma vez.

Cobre os casos que dão trabalho: atualização otimista que volta atrás se der erro, lista infinita com carregar mais, paginação que mantém a página anterior na tela, consultas em paralelo e em sequência, Suspense, pré-carregamento ao passar o mouse e SSR com hidratação, inclusive em React Server Components.

Fecha com testes no Testing Library, tipos em TypeScript, cache salvo no localStorage e uma lista de erros comuns, como confundir initialData com placeholderData ou esquecer o initialPageParam das listas infinitas, que é obrigatório na v5.

Nas palavras de quem fez

Quando usar

• Painel que mostra pedidos e vendas puxados de uma API
• Lista de produtos com rolagem infinita ou paginação
• Botão de curtir ou salvar que muda na hora, antes do servidor responder
• App em Next.js que precisa carregar os dados no servidor
• Tirar um monte de useEffect com fetch espalhado pelo código

Depois de instalar, é só pedir assim

• Troca esses useEffect com fetch da tela de pedidos por TanStack Query, com cache de 1 minuto
• Faz a lista de produtos carregar mais itens quando a pessoa chega no fim da página
• Quando eu marcar uma tarefa como feita, quero que mude na hora e volte se der erro no servidor

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas