api-client
إعداد عملاء API باستخدام TanStack Query
يتطلب بناء عملاء API معالجة دقيقة لرموز المصادقة وحالات الأخطاء والاستجابات الآمنة من حيث النوع. توفر هذه المهارة إرشادات متخصصة لتنفيذ عملاء API قويين باستخدام TanStack Query و Axios مع JWT interceptors والتعامل مع الأخطاء العالمي واكتشاف عدم الاتصال.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "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 للتحقق