api-client
إعداد عملاء API باستخدام TanStack Query
يتطلب بناء عملاء API معالجة دقيقة لرموز المصادقة وحالات الأخطاء والاستجابات الآمنة من حيث النوع. توفر هذه المهارة إرشادات متخصصة لتنفيذ عملاء API قويين باستخدام TanStack Query و Axios مع JWT interceptors والتعامل مع الأخطاء العالمي واكتشاف عدم الاتصال.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「api-client」を使用しています。 Set up an API client with JWT authentication
期待される結果:
- Created lib/apiClient.ts with Axios instance and JWT interceptors
- Created lib/queryClient.ts with TanStack Query configuration
- Added request interceptor to attach Bearer tokens from auth store
- Added response interceptor to handle 401 and refresh tokens
- Implemented automatic redirect to login on token expiry
「api-client」を使用しています。 Create a type-safe hook for fetching student data
期待される結果:
- Created StudentSchema with Zod for validation
- Implemented useApi hook with type-safe generics
- Added error handling with toast notifications
- Included proper loading and error states
セキュリティ監査
低リスク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.
リスク要因
🌐 ネットワークアクセス (5)
📁 ファイルシステムへのアクセス (1)
⚙️ 外部コマンド (1)
🔑 環境変数 (2)
品質スコア
作れるもの
المطورون العاملون في تطبيقات React
إعداد طبقة عميل API كاملة مع TanStack Query و Axios بما في ذلك JWT للمصادقة ومعالجة الأخطاء والاستجابات الآمنة من حيث النوع لتطبيق React/Next.js.
الفرق التي تنفذ تدفقات المصادقة
إضافة إدارة JWT token لعملاء API مع تحديث الرمز التلقائي ومعالجة 401 وإعادة التوجيه إلى تسجيل الدخول عند انتهاء الجلسة.
التطبيقات التي تتطلب معالجة قوية للأخطاء
تنفيذ معالجة شاملة للأخطاء تعرض رسائل سهلة الاستخدام لرموز HTTP المختلفة مع إشعارات التنبيه.
これらのプロンプトを試す
إعداد تكوين TanStack Query وعميل API باستخدام Axios لتطبيقي Next.js. قم بتضمين ربط رمز JWT عبر interceptors ومعالج أخطاء عالمي مع إشعارات التنبيه.
إنشاء خطافات API آمنة من حيث النوع باستخدام مخططات Zod للتحقق من الاستجابة. قم بتضمين خطاف useApi لطلبات GET و useApiMutation لعمليات POST/PUT/DELETE مع معالجة الأخطاء.
تنفيذ استرجاع البيانات المرقم مع التمرير اللانهائي باستخدام TanStack Query useInfiniteQuery. تضمين تعريفات النوع المناسبة وحالات الأخطاء.
إضافة اكتشاف عدم الاتصال والتحديثات المتفائلة لخطافات API الخاصة بي. تضمين التراجع عند الخطأ و AbortController للطلبات القابلة للإلغاء.
ベストプラクティス
- تكوين staleTime و gcTime المناسب للتخزين المؤقت لتقليل طلبات API غير الضرورية
- استخدام مخططات Zod للتحقق من وقت التشغيل لاستجابات API
- تنفيذ AbortController لجميع العمليات غير المتزامنة لمنع حالات Race
- إضافة إعادة المحاولة مع التراجع الأسي للطلبات الفاشلة
回避
- تجنب ترميز روابط API مباشرة في المكونات؛ استخدام متغيرات البيئة
- لا تتخطى معالجة الأخطاء؛ قدم دائمًا ملاحظات للمستخدم للطلبات الفاشلة
- تجنب تغيير بيانات الاستجابة مباشرة؛ استخدم مخططات Zod للتحقق