Vue Academy · Pelajaran

Menyiapkan Apollo Client di Vue 3

ApolloClient, InMemoryCache, provideApolloClient(), serta penyiapan @vue/apollo-composable.

Menyiapkan Apollo Client di Vue 3 adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

GraphQL dengan Vue

GraphQL memungkinkan klien meminta tepat data yang dibutuhkannya dalam satu permintaan. Apollo Client adalah klien GraphQL yang paling populer, dan @vue/apollo-composable mengintegrasikannya dengan Composition API Vue 3.

Memasang Paket

Anda memerlukan inti Apollo, pengurai GraphQL, dan lapisan komposabel Vue.

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

Membuat Klien

Klien Apollo memerlukan uri server dan cache. InMemoryCache menyimpan hasil kueri agar pembacaan berulang berlangsung seketika.

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

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

Fungsi Cache

InMemoryCache menormalkan respons berdasarkan ID entitas. Saat dua kueri mengembalikan objek yang sama, cache menyimpannya satu kali, dan pembaruan pada objek tersebut menyegarkan setiap tampilan yang menggunakannya.

Menyediakan Klien

Daftarkan klien di seluruh aplikasi agar setiap komponen dapat menjalankan kueri. Kunci injeksi DefaultApolloClient menghubungkannya ke Composition API.

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

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

Beberapa Klien

Untuk beberapa titik akhir GraphQL, berikan peta ApolloClients dan beri nama setiap klien. Komponen memilih salah satunya melalui opsi clientId.

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

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

provideApolloClient

Di luar setup komponen—misalnya di dalam komposabel—gunakan provideApolloClient agar klien tersedia untuk panggilan useQuery.

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

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

Menambahkan Header Autentikasi

API nyata memerlukan token autentikasi. Konfigurasikan headers dalam opsi klien, atau gunakan tautan Apollo untuk menyertakan token pada setiap permintaan.

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

Mengonfigurasi Opsi Default

Kolom defaultOptions menyesuaikan perilaku seperti kebijakan pengambilan data default—misalnya selalu membaca dari cache terlebih dahulu.

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

Menulis Kueri Pertama Anda

Tentukan kueri dengan tag templat gql dari @apollo/client/core. Tag tersebut mengurai string GraphQL menjadi dokumen yang dipahami Apollo.

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

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

Memverifikasi Penyiapan

Setelah klien disediakan, komponen mana pun dapat memanggil useQuery dengan dokumen tersebut. Jika data mengalir kembali, klien dan penyedia Anda telah terhubung dengan benar.

Uji Singkat

Uji pengetahuan Anda tentang penyiapan Apollo.

Ringkasan

Anda telah menyiapkan Apollo di Vue 3:

Buat ApolloClient dengan uri dan InMemoryCache.
Cache menormalkan hasil berdasarkan ID entitas.
Sediakan dengan DefaultApolloClient (atau ApolloClients untuk banyak klien).
Gunakan provideApolloClient di dalam komposabel; tentukan kueri dengan gql.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Apollo Client di Vue 3” gratis?

Ya — teks lengkap “Menyiapkan Apollo Client di Vue 3” 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 “Menyiapkan Apollo Client di Vue 3”?

ApolloClient, InMemoryCache, provideApolloClient(), serta penyiapan @vue/apollo-composable. 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 1 dari 4.

Berapa lama pelajaran “Menyiapkan Apollo Client di Vue 3” 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