React Query skill

O que ela faz

A skill dá ao Claude as regras de uso do React Query (hoje TanStack Query) num app React com TypeScript: todo dado que vem do servidor passa por ele, sem useEffect pra buscar dado nem resposta da API guardada em useState. O que não vem do servidor, como o tema, fica em Context com useReducer ou no Zustand.

Traz os padrões prontos: provider com tempo de cache, busca que depende de outra, paginação, rolagem infinita, mutação que invalida o cache e atualização otimista, que muda a tela na hora e desfaz se der erro. Também organiza as chaves de cache e os hooks por funcionalidade, em queries.ts e mutations.ts.

Pra erro, o Claude faz a camada de API devolver mensagem que a pessoa entende, trata carregando e erro em cada tela e usa error boundary com botão de tentar de novo. Pra velocidade, pré-carrega o dado quando o mouse passa no link e faz a tela acompanhar só o campo que ela usa.

Nas palavras de quem fez

Quando usar

• Ligar o painel do seu app a uma API sem chamada repetida
• Fazer lista com paginação ou rolagem infinita
• Atualizar a tela na hora quando a pessoa salva algo
• Tirar o useEffect de busca de dados de um app antigo

Depois de instalar, é só pedir assim

• Troca os useEffect que buscam dados nesse app por React Query, com carregando e erro em cada tela
• Cria os hooks de pedidos com React Query: lista paginada, detalhe e mutação que atualiza a lista
• Faz a curtida aparecer na hora com atualização otimista e desfazer se a API falhar

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