0Pricing
Vue Academy · Ders

Veri Çekme için useQuery

useQuery(QUERY), result, loading, error, variables ve fetchPolicy seçenekleri.

Veri Çekme için useQuery, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

useQuery ile Sorgulama

useQuery bileşim işlevi bir GraphQL sorgusu çalıştırır ve tepkisel durum döndürür. Değişkenler değiştiğinde otomatik olarak yeniden veri çeker ve önbellek değiştiğinde güncellenir.

Temel Kullanım

Bir gql belgesi iletin. useQuery, result, loading ve error ref'lerini döndürür.

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

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

Sonucu Okuma

result bir ref'tir. Verilere result.value üzerinden erişin — bu değer, sorguyla tam olarak aynı biçimdeki yanıtı içerir.

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

Yükleme ve Hata Durumları

Yükleme göstergesi göstermek için loading, ileti göstermek için error kullanın. Her ikisi de istek ilerledikçe güncellenen tepkisel ref'lerdir.

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

Sorgu Değişkenleri

Değişkenleri ikinci bağımsız değişken olarak iletin. Bir değişkenin değeri her değiştiğinde sorgu yeniden çalışır.

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

Tepkisel Değişkenler

Dinamik değişkenler için değişkenler nesnesini döndüren bir işlev veya tepkisel bir ref iletin. Başvurulan bir ref değiştiğinde sorgu otomatik olarak yeniden veri çeker.

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

onResult Kancası

onResult, her yeni veri geldiğinde çalışır — analiz veya başka bir depoyla eşitleme gibi yan etkiler için kullanışlıdır.

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

Elle Yeniden Veri Çekme

useQuery, sorguyu isteğe bağlı olarak yeniden çalıştırmak için bir refetch işlevi döndürür — harici bir değişiklikten veya yenileme düğmesinden sonra kullanılabilir.

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

fetchMore ile Sayfalama

fetchMore, ek sayfaları yükler ve updateQuery kullanarak bunları mevcut sonuçla birleştirir — sonsuz kaydırmanın temelini oluşturur.

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

Veri Çekme İlkeleri

fetchPolicy seçeneği, önbellek kullanımını denetler: cache-first (varsayılan) ağdan önce önbelleği okur, network-only her zaman sunucuya gider, cache-and-network önce önbelleği gösterir ve ardından yeniler.

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

Koşullu Sorgular

Bir sorguyu bir koşul karşılanana kadar ertelemek için enabled seçeneğini kullanın — örneğin bir kimlik seçilene kadar veri çekmeyin.

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

Hızlı Kontrol

useQuery konusundaki bilginizi sınayın.

Özet

useQuery işlevini öğrendiniz:

  • Tepkisel result, loading ve error döndürür.
  • Verileri result.value üzerinden okuyun.
  • Tepkisellik için değişkenleri bir nesne veya işlev olarak iletin.
  • refetch() sorguyu yeniden çalıştırır, fetchMore() sayfalama yapar, fetchPolicy önbellek kullanımını denetler.

Sıkça Sorulan Sorular

“Veri Çekme için useQuery” dersi ücretsiz mi?

Evet — “Veri Çekme için useQuery” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Veri Çekme için useQuery” dersinde ne öğreneceğim?

useQuery(QUERY), result, loading, error, variables ve fetchPolicy seçenekleri. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Veri Çekme için useQuery” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue 3'te Apollo Client Kurulumu
  2. Veri Çekme için useQuery
  3. Veri Değişiklikleri için useMutation
  4. useSubscription ile Gerçek Zamanlı Abonelikler
← Vue Academy Sayfasına Dön