0Pricing
Vue Academy · Ders

Vue 3'te Apollo Client Kurulumu

ApolloClient, InMemoryCache, provideApolloClient() ve @vue/apollo-composable kurulumu.

Vue 3'te Apollo Client Kurulumu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.

Vue ile GraphQL

GraphQL, istemcinin tek bir istekte tam olarak ihtiyaç duyduğu verileri istemesini sağlar. Apollo istemcisi, en popüler GraphQL istemcisidir ve @vue/apollo-composable, onu Vue 3'ün Composition API'siyle bütünleştirir.

Paketleri Yükleme

Apollo çekirdeğine, GraphQL ayrıştırıcısına ve Vue bileşim katmanına ihtiyacınız vardır.

npm install @apollo/client graphql @vue/apollo-composable

İstemciyi Oluşturma

Bir Apollo istemcisi için sunucu uri'si ve bir önbellek gerekir. InMemoryCache, sorgu sonuçlarını saklayarak tekrarlanan okumaları anında hâle getirir.

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

Önbelleğin Yaptığı İş

InMemoryCache, yanıtları varlık kimliğine göre normalleştirir. İki sorgu aynı nesneyi döndürdüğünde önbellek bu nesneyi bir kez saklar ve nesnenin güncellenmesi, onu kullanan tüm görünümleri yeniler.

İstemciyi Sağlama

Her bileşenin sorgu çalıştırabilmesi için istemciyi uygulama genelinde kaydedin. DefaultApolloClient ekleme anahtarı, istemciyi Composition API'ye bağlar.

import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

Birden Çok İstemci

Birden fazla GraphQL uç noktası için bir ApolloClients eşlemesi sağlayın ve her istemciyi adlandırın. Bileşenler, clientId seçeneği aracılığıyla bir istemci seçer.

import { ApolloClients } from '@vue/apollo-composable'

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

Bileşen setup işlevinin dışında — örneğin bir bileşim işlevinin içinde — istemciyi useQuery çağrılarının kullanımına sunmak için provideApolloClient kullanın.

import { provideApolloClient } from '@vue/apollo-composable'

provideApolloClient(apolloClient)
// now useQuery works in this composable

Kimlik Doğrulama Üst Bilgileri Ekleme

Gerçek API'ler bir kimlik doğrulama belirtecine ihtiyaç duyar. İstemci seçeneklerinde headers yapılandırın veya belirteci her isteğe eklemek için bir Apollo bağlantısı kullanın.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

Varsayılan Seçenekleri Yapılandırma

defaultOptions alanı, varsayılan veri çekme ilkesi gibi davranışları ayarlar — örneğin her zaman önce önbellekten okuma.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

İlk Sorgunuzu Yazma

@apollo/client/core içindeki gql şablon etiketini kullanarak bir sorgu tanımlayın. Bu etiket, GraphQL dizesini Apollo'nun anlayacağı bir belgeye ayrıştırır.

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

Kurulumu Doğrulama

İstemci sağlandıktan sonra herhangi bir bileşen, bu belgeyle useQuery çağırabilir. Veriler geri akıyorsa istemciniz ve sağlayıcınız doğru şekilde bağlanmış demektir.

Hızlı Kontrol

Apollo kurulumu konusundaki bilginizi sınayın.

Özet

Apollo'yu Vue 3'te kurdunuz:

  • uri ve InMemoryCache ile bir ApolloClient oluşturun.
  • Önbellek, sonuçları varlık kimliğine göre normalleştirir.
  • İstemciyi DefaultApolloClient ile (veya birden fazla istemci için ApolloClients ile) sağlayın.
  • Bileşim işlevlerinin içinde provideApolloClient kullanın; sorguları gql ile tanımlayın.

Sıkça Sorulan Sorular

“Vue 3'te Apollo Client Kurulumu” dersi ücretsiz mi?

Evet — “Vue 3'te Apollo Client Kurulumu” 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.

“Vue 3'te Apollo Client Kurulumu” dersinde ne öğreneceğim?

ApolloClient, InMemoryCache, provideApolloClient() ve @vue/apollo-composable kurulumu. 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 1. dersidir.

“Vue 3'te Apollo Client Kurulumu” 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