الواجهات والتصميم

TanStack Query Data Fetching

أدِر حالة السيرفر باستخدام TanStack Query، مع caching تلقائي و background updates و stale data و pagination.

Claude Code Cursor Copilot Windsurf Gemini CLI

نظرة عامة

TanStack Query (كان اسمها React Query) هي المعيار لإدارة حالة السيرفر في تطبيقات React. أدوات الـ AI بتقدر تضبط query clients وتكتب query و mutation hooks وتنفّذ optimistic updates وتضبط استراتيجيات caching وتتعامل مع pagination و infinite scroll patterns.

المكتبة بتفرّق بين حالة السيرفر (بيانات من APIs) وحالة العميل (حالة UI)، وبتحل مشكلة الخلط الشائعة بينهم. أداة الـ AI بتقدر تنفّذ `useQuery` لجلب البيانات مع refetching تلقائي، و `useMutation` لعمليات create/update/delete مع cache invalidation، و `useInfiniteQuery` للقوائم المقسمة لصفحات.

TanStack Query دلوقتي بتدعم React و Vue و Solid و Svelte و Angular. أدوات الـ AI بتقدر تضبط query defaults وتنفّذ retry strategies وتضبط query prefetching لتنقل أسرع وتبني تطبيقات offline-first مع query persistence.

لمن هذه الأداة؟

مطوري frontend اللي بيديروا بيانات API مع caching تلقائي
الفرق اللي بتنفذ optimistic updates لواجهات مستجيبة
المطورين اللي بيبنوا infinite scroll وقوائم مقسمة لصفحات
المهندسين اللي بيبنوا تطبيقات قادرة على العمل offline مع query persistence

التثبيت

إعداد Claude Code

npm install @tanstack/react-query
# Optional: npm install @tanstack/react-query-devtools

الإعدادات

// App.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 5 * 60 * 1000, retry: 2 },
  },
});

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

زيارة المصدر (الموقع الرسمي)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor