เมนู
ในหน้านี้

การดึงข้อมูลด้วย React Query

เรียนรู้วิธีใช้ TanStack Query สำหรับจัดการ server state, caching และ data synchronization

TanStack Query (เดิมชื่อ React Query) เป็นโซลูชันหลักสำหรับจัดการ server state ในแอป React ต่างจาก state management แบบดั้งเดิมอย่าง Redux มันจัดการกับ async data โดยเฉพาะ — เรียก API, cache ผลลัพธ์ และ sync ข้อมูล ผมเลือกใช้เพราะมันลด boilerplate code, มี auto refetching และ DevTools สำหรับ debug ที่ยอดเยี่ยม รูปแบบที่แสดงนี้แยก concerns ออก: service layer จัดการ API calls, provider ครอบ app และ hooks ใช้ข้อมูล — ทำให้ codebase สะอาดและดูแลง่าย

ผมใช้ TanStack Query เพราะความสามารถด้าน caching, auto-refetching และ DevTools ที่ยอดเยี่ยม แต่คุณสามารถได้ผลลัพธ์คล้ายกันด้วย fetch + useEffect, Axios + custom hooks, SWR หรือ RTK Query แนวคิดหลัก — การแยก API logic, จัดการ loading/error states และ caching — ใช้ได้กับทุก library ที่คุณเลือก

วิธีการทำงาน

lib/
└── providers/
    └── react-query-provider.tsx  # Query client provider

services/
└── stock-service.ts              # API service with hooks

app/
└── layout.tsx                    # Root layout with provider

components/
└── StockDashboard.tsx            # Example usage component

Caching

Automatic caching reduces API calls and improves performance.

Auto Refetch

Configurable refetch intervals keep data up-to-date automatically.

Devtools

Built-in devtools for debugging queries and cache state.

คุณสมบัติหลัก

  • •Automatic caching และ background refetching
  • •Loading และ error states ที่จัดการให้อัตโนมัติ
  • •Optimistic updates สำหรับ UX ที่ดีขึ้น
  • •Pagination และ infinite scroll support
  • •DevTools สำหรับ debugging

ตัวอย่างการใช้งาน
API

กำลังโหลด...

How this demo works:

  • • Real API: Fetching live stock data from Twelve Data API
  • • Caching: React Query caches responses, switching back is instant
  • • Loading State: Built-in loading state management
  • • Error Handling: Automatic error handling with retry option
  • • Refresh: Click refresh to refetch latest data from API