# React Query (TanStack Query) (React / Next.js)

> useQuery, useMutation, invalidation, cache, refetch, สถานะ loading/error, optimistic updates, query keys, การแบ่งหน้า

- 20 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

## 1. บทบาทหลักของ useQuery ใน React Query คืออะไร?

**คำตอบ**

useQuery เป็น hook พื้นฐานสำหรับดึงข้อมูลแบบอ่านอย่างเดียวจาก API หรือแหล่งข้อมูล มันจัดการ cache, สถานะ loading, error และกลยุทธ์ refetch โดยอัตโนมัติ ต่างจาก useEffect กับ fetch ตรงที่ useQuery เพิ่มประสิทธิภาพโดยหลีกเลี่ยง request ที่ซ้ำซ้อนผ่านระบบ cache อัจฉริยะ

## 2. ควรใช้ hook ใดเพื่อทำ POST mutation ไปยัง API?

**คำตอบ**

useMutation เป็น hook สำหรับการดำเนินการเขียนโดยเฉพาะ เช่น POST, PUT, PATCH หรือ DELETE โดยมี callback อย่าง onSuccess, onError และ onMutate สำหรับจัดการวงจรชีวิตของ mutation ต่างจาก useQuery ที่ใช้สำหรับอ่านข้อมูล useMutation ไม่ทริกเกอร์ request โดยอัตโนมัติ และต้องเรียกฟังก์ชัน mutate อย่างชัดเจน

## 3. query key ใน React Query มีจุดประสงค์อะไร?

**คำตอบ**

query key คือตัวระบุเฉพาะที่ช่วยให้ React Query จัดการ cache และ dependency ระหว่าง query ต่างๆ ใช้สำหรับระบุ, invalidate และ refetch query เฉพาะ query key อาจเป็น string ธรรมดาหรือ array ที่มีพารามิเตอร์แบบไดนามิก การเปลี่ยน query key จะทริกเกอร์ fetch ใหม่โดยอัตโนมัติ ซึ่งช่วยให้จัดการ dependency แบบ declarative ได้

## มีอีก 17 คำถาม

- staleTime ในการตั้งค่า useQuery หมายถึงอะไร?
- property ใดที่บ่งบอกว่า useQuery กำลัง loading อยู่?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior
- [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack