Habilidades api-client
📦

api-client

Baixo Risco 🌐 Acesso à rede📁 Acesso ao sistema de arquivos⚙️ Comandos externos🔑 Variáveis de ambiente

使用 TanStack Query 设置 API 客户端

构建 API 客户端需要仔细处理身份验证令牌、错误状态和类型安全的响应。此技能为使用 TanStack Query 和 Axios 实现强大的 API 客户端提供专家指导,包括 JWT 拦截器、全局错误处理和离线检测。

Suporta: Claude Codex Code(CC)
⚠️ 67 Ruim
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "api-client". 设置带 JWT 身份验证的 API 客户端

Resultado esperado:

  • 创建了 lib/apiClient.ts,包含 Axios 实例和 JWT 拦截器
  • 创建了 lib/queryClient.ts,包含 TanStack Query 配置
  • 添加了请求拦截器,从 auth store 附加 Bearer 令牌
  • 添加了响应拦截器,处理 401 并刷新令牌
  • 实现了令牌过期时自动重定向到登录页面

A utilizar "api-client". 创建用于获取学生数据的类型安全 hook

Resultado esperado:

  • 使用 Zod 创建了 StudentSchema 进行验证
  • 实现了带类型安全泛型的 useApi hook
  • 添加了带 toast 通知的错误处理
  • 包含了适当的加载和错误状态

Auditoria de Segurança

Baixo Risco
v6 • 1/21/2026

This is a legitimate API client skill with standard patterns for TanStack Query and Axios integration. Static scanner produced multiple false positives: SHA256 hashes and HTTP status codes were flagged as crypto/C2 patterns; template literals and ternary operators were flagged as shell backticks; environment variable documentation was flagged as sensitive access. All findings are benign code patterns for API client implementation.

2
Arquivos analisados
1,664
Linhas analisadas
4
achados
6
Total de auditorias

Fatores de risco

🌐 Acesso à rede (5)
SKILL.md:72 SKILL.md:79 SKILL.md:153 SKILL.md:157 SKILL.md:737-740
📁 Acesso ao sistema de arquivos (1)
SKILL.md:729
⚙️ Comandos externos (1)
SKILL.md:29-733
🔑 Variáveis de ambiente (2)
SKILL.md:80 SKILL.md:729-732
Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
22
Comunidade
90
Segurança
83
Conformidade com especificações

O Que Você Pode Construir

构建 React 应用程序的全栈开发者

为 React/Next.js 应用程序设置完整的 API 客户端层,包括 TanStack Query 和 Axios,涵盖 JWT 身份验证、错误处理和类型安全的响应。

实现身份验证流程的团队

为 API 客户端添加 JWT 令牌管理,包括自动令牌刷新、401 处理和会话过期时重定向到登录页面。

需要强大错误处理的应用程序

实现全面的错误处理,为不同的 HTTP 状态码显示用户友好的消息,并提供 toast 通知。

Tente Estes Prompts

基本 API 客户端设置 
为我的 Next.js 应用程序设置 TanStack Query 配置和 Axios API 客户端。通过拦截器附加 JWT 令牌,并使用 toast 通知实现全局错误处理器。
类型安全的数据获取 
使用 Zod 模式进行响应验证,创建类型安全的 API hooks。包括用于 GET 请求的 useApi hook 和用于 POST/PUT/DELETE 操作的 useApiMutation,并提供错误处理。
分页和无限查询 
使用 TanStack Query 的 useInfiniteQuery 实现带无限滚动的分页数据获取。包括适当的类型定义和错误状态。
离线支持和乐观更新 
为我的 API hooks 添加离线检测和乐观更新。包括错误时的回滚和用于可取消请求的 AbortController。

Melhores Práticas

  • 配置适当的 staleTime 和 gcTime 进行缓存,以减少不必要的 API 调用
  • 使用 Zod 模式对 API 响应进行运行时类型验证
  • 为所有异步操作实现 AbortController,以防止竞态条件
  • 为失败的请求添加指数退避的重试机制

Evitar

  • 避免在组件中直接硬编码 API URL;应使用环境变量
  • 不要跳过错误处理;始终为失败的请求提供用户反馈
  • 避免直接修改响应数据;使用 Zod 模式进行验证

Perguntas Frequentes

此技能使用哪些库来构建 API 客户端?
此技能使用 TanStack Query (React Query) v5 进行数据获取和缓存,使用 Axios 进行 HTTP 请求。它还使用 Zod 进行类型安全的响应验证。
JWT 身份验证如何与此技能配合使用?
此技能创建一个带有请求拦截器的 Axios 实例,该拦截器从您的 auth store 中将 JWT 令牌附加到所有请求。响应拦截器处理 401 错误,并可以自动刷新令牌。
我可以使用原生 fetch 而不是 Axios 吗?
此技能专为 TanStack Query 与 Axios 设计。虽然 TanStack Query 可以与 fetch 配合使用,但 Axios 为 JWT 处理提供了更好的拦截器支持,是此技能推荐的方法。
错误处理是如何工作的?
此技能实现了一个全局错误处理器,为不同的 HTTP 状态码显示 toast 通知。它处理 400、401、403、404、429、500 和其他错误,并提供用户友好的消息。
需要哪些环境变量?
在您的 .env.local 文件中设置 NEXT_PUBLIC_API_URL 以配置 API 基础 URL。例如:NEXT_PUBLIC_API_URL=https://api.yourapp.com
此技能支持分页吗?
是的,此技能包含基于偏移量的分页和使用 useInfiniteQuery 实现无限滚动的模式,并提供适当的类型定义和错误处理。

Detalhes do Desenvolvedor

Autor

Awais68

Licença

MIT

Repositório

https://github.com/Awais68/hackathon-2-phase-ii-full-stack-web-app/tree/main/.claude/skills/api-client

Referência

main

Estrutura de arquivos

📄 SKILL.md