0Pricing
Vue Academy · บทเรียน

การใช้ useQuery เพื่อดึงข้อมูล

useQuery(QUERY), result, loading, error, variables และตัวเลือก fetchPolicy

การใช้ useQuery เพื่อดึงข้อมูล เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

การเรียกใช้คำขอด้วย useQuery

คอมโพสิเบิล useQuery จะเรียกใช้คำขอ GraphQL และส่งคืนสถานะแบบตอบสนอง โดยจะดึงข้อมูลใหม่โดยอัตโนมัติเมื่อตัวแปรเปลี่ยน และอัปเดตเมื่อแคชเปลี่ยนแปลง

การใช้งานพื้นฐาน

ส่งเอกสาร gql ให้กับฟังก์ชัน useQuery จะส่งคืนรีฟ result, loading และ error

import { useQuery } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { result, loading, error } = useQuery(gql(
  'query { posts { id title } }'
))

การอ่านผลลัพธ์

result เป็นรีฟ เข้าถึงข้อมูลผ่าน result.value ซึ่งเก็บการตอบกลับของคำขอในรูปแบบเดียวกับคำขอทุกประการ

const posts = computed(() => result.value?.posts ?? [])

สถานะกำลังโหลดและข้อผิดพลาด

ใช้ loading เพื่อแสดงตัวแสดงการโหลด และใช้ error เพื่อแสดงข้อความ ทั้งคู่เป็นรีฟแบบตอบสนองที่อัปเดตตามความคืบหน้าของคำขอ

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">{{ error.message }}</p>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

ตัวแปรคำขอ

ส่งตัวแปรเป็นอาร์กิวเมนต์ที่สอง คำขอจะทำงานอีกครั้งทุกครั้งที่ค่าของตัวแปรเปลี่ยน

const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  { id: 1 }
)

ตัวแปรแบบตอบสนอง

สำหรับตัวแปรแบบไดนามิก ให้ส่งฟังก์ชันที่คืนออบเจ็กต์ตัวแปร หรือส่งรีฟแบบตอบสนอง เมื่อรีฟที่อ้างอิงมีค่าเปลี่ยน คำขอจะถูกดึงข้อมูลใหม่โดยอัตโนมัติ

const id = ref(1)
const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  () => ({ id: id.value })
)

ฮุก onResult

onResult จะทำงานทุกครั้งที่มีข้อมูลใหม่เข้ามา ซึ่งมีประโยชน์สำหรับผลข้างเคียง เช่น การวิเคราะห์ข้อมูลหรือการซิงค์กับคลังข้อมูลอื่น

const { onResult } = useQuery(QUERY)
onResult((res) => {
  console.log('Got', res.data)
})

การดึงข้อมูลใหม่ด้วยตนเอง

useQuery จะคืนฟังก์ชัน refetch สำหรับเรียกคำขอใหม่ตามต้องการ เช่น หลังการเปลี่ยนแปลงจากภายนอกหรือการกดปุ่มรีเฟรช

const { result, refetch } = useQuery(QUERY)
function reload() { refetch() }

การแบ่งหน้าด้วย fetchMore

fetchMore จะโหลดหน้าเพิ่มเติมและรวมเข้ากับผลลัพธ์เดิมโดยใช้ updateQuery ซึ่งเป็นพื้นฐานของการเลื่อนแบบไม่สิ้นสุด

const { result, fetchMore } = useQuery(QUERY, { offset: 0 })
function loadMore() {
  fetchMore({
    variables: { offset: result.value.posts.length },
    updateQuery: (prev, { fetchMoreResult }) => ({
      posts: [...prev.posts, ...fetchMoreResult.posts]
    })
  })
}

นโยบายการดึงข้อมูล

ตัวเลือก fetchPolicy ควบคุมการใช้แคช: cache-first (ค่าเริ่มต้น) จะอ่านแคชก่อนเครือข่าย network-only จะเรียกเซิร์ฟเวอร์เสมอ และ cache-and-network จะแสดงแคชก่อนแล้วจึงรีเฟรช

useQuery(QUERY, null, {
  fetchPolicy: 'cache-and-network'
})

คำขอแบบมีเงื่อนไข

ใช้ตัวเลือก enabled เพื่อหน่วงคำขอจนกว่าเงื่อนไขจะเป็นจริง เช่น ไม่ดึงข้อมูลจนกว่าจะมีการเลือก id

const id = ref(null)
useQuery(QUERY, () => ({ id: id.value }), {
  enabled: computed(() => id.value !== null)
})

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับ useQuery

สรุป

คุณได้เรียนรู้ useQuery:

  • ส่งคืน result, loading และ error แบบตอบสนอง
  • อ่านข้อมูลผ่าน result.value
  • ส่งตัวแปรเป็นออบเจ็กต์หรือฟังก์ชันเพื่อให้ตอบสนองต่อการเปลี่ยนแปลง
  • refetch() เรียกคำขอใหม่ fetchMore() ใช้แบ่งหน้า และ fetchPolicy ควบคุมการใช้แคช

คำถามที่พบบ่อย

บทเรียน “การใช้ useQuery เพื่อดึงข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การใช้ useQuery เพื่อดึงข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การใช้ useQuery เพื่อดึงข้อมูล”

useQuery(QUERY), result, loading, error, variables และตัวเลือก fetchPolicy คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การใช้ useQuery เพื่อดึงข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า Apollo Client ใน Vue 3
  2. การใช้ useQuery เพื่อดึงข้อมูล
  3. การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล
  4. การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription
← กลับไปที่ Vue Academy