Vue Academy · Pelajaran

useQuery untuk Pengambilan Data

useQuery(QUERY), result, loading, error, variables, serta opsi fetchPolicy.

useQuery untuk Pengambilan Data adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengambil Data dengan useQuery

Komposabel useQuery menjalankan kueri GraphQL dan mengembalikan status reaktif. Komposabel ini otomatis mengambil ulang data saat variabel berubah dan memperbarui hasil saat cache berubah.

Penggunaan Dasar

Berikan dokumen gql. useQuery mengembalikan ref result, loading, dan error.

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

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

Membaca Hasil

result adalah ref. Akses data melalui result.value—data tersebut menyimpan respons kueri dengan bentuk yang persis sama seperti kuerinya.

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

Status Pemuatan dan Galat

Gunakan loading untuk menampilkan indikator pemuatan dan error untuk menampilkan pesan. Keduanya adalah ref reaktif yang diperbarui seiring berjalannya permintaan.

<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>

Variabel Kueri

Berikan variabel sebagai argumen kedua. Kueri akan berjalan ulang setiap kali nilai variabel berubah.

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

Variabel Reaktif

Untuk variabel dinamis, berikan fungsi yang mengembalikan objek variabel, atau ref reaktif. Saat ref yang dirujuk berubah, kueri akan diambil ulang secara otomatis.

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

Pengait onResult

onResult berjalan setiap kali data baru tiba—berguna untuk efek samping seperti analitik atau menyinkronkan data ke penyimpanan lain.

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

Mengambil Ulang Secara Manual

useQuery mengembalikan fungsi refetch untuk menjalankan ulang kueri sesuai kebutuhan—setelah perubahan eksternal atau saat tombol penyegaran ditekan.

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

Paginasi dengan fetchMore

fetchMore memuat halaman tambahan dan menggabungkannya ke hasil yang ada menggunakan updateQuery—dasar dari pengguliran tanpa akhir.

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

Kebijakan Pengambilan Data

Opsi fetchPolicy mengendalikan penggunaan cache: cache-first (default) membaca cache sebelum jaringan, network-only selalu mengakses server, sedangkan cache-and-network menampilkan cache lalu menyegarkan data.

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

Kueri Bersyarat

Gunakan opsi enabled untuk menunda kueri hingga suatu kondisi terpenuhi—misalnya, jangan mengambil data sampai ID dipilih.

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

Uji Singkat

Uji pengetahuan Anda tentang useQuery.

Ringkasan

Anda telah mempelajari useQuery:

Mengembalikan result, loading, dan error yang reaktif.
Baca data melalui result.value.
Berikan variabel sebagai objek atau fungsi agar bersifat reaktif.
refetch() menjalankan ulang kueri, fetchMore() melakukan paginasi, dan fetchPolicy mengendalikan penggunaan cache.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “useQuery untuk Pengambilan Data” gratis?

Ya — teks lengkap “useQuery untuk Pengambilan Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “useQuery untuk Pengambilan Data”?

useQuery(QUERY), result, loading, error, variables, serta opsi fetchPolicy. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “useQuery untuk Pengambilan Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan Apollo Client di Vue 3
useQuery untuk Pengambilan Data
useMutation untuk Perubahan Data
Subscription Real-Time dengan useSubscription

← Kembali ke Vue Academy