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

การตั้งค่า Apollo Client ใน Vue 3

ApolloClient, InMemoryCache, provideApolloClient() และการตั้งค่า @vue/apollo-composable

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

GraphQL กับ Vue

GraphQL ช่วยให้ไคลเอนต์ขอเฉพาะข้อมูลที่ต้องการได้ภายในการเรียกครั้งเดียว Apollo Client เป็นไคลเอนต์ GraphQL ที่ได้รับความนิยมสูงสุด และ @vue/apollo-composable ช่วยผสานการทำงานเข้ากับ Composition API ของ Vue 3

การติดตั้งแพ็กเกจ

คุณต้องใช้แกนหลักของ Apollo ตัวแยกวิเคราะห์ GraphQL และชั้นคอมโพสิเบิลของ Vue

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

การสร้างไคลเอนต์

ไคลเอนต์ Apollo ต้องมี uri ของเซิร์ฟเวอร์และแคช InMemoryCache จะเก็บผลลัพธ์คำขอไว้ เพื่อให้การอ่านซ้ำทำได้ทันที

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

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

แคชช่วยทำอะไร

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

การลงทะเบียนไคลเอนต์

ลงทะเบียนไคลเอนต์ให้ใช้ได้ทั่วทั้งแอป เพื่อให้คอมโพเนนต์ทุกตัวเรียกใช้คำขอได้ คีย์การแทรก DefaultApolloClient จะเชื่อมไคลเอนต์เข้ากับ Composition API

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

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

ไคลเอนต์หลายตัว

หากมีจุดปลายทาง GraphQL หลายแห่ง ให้ส่งแผนผัง ApolloClients และตั้งชื่อไคลเอนต์แต่ละตัว คอมโพเนนต์จะเลือกไคลเอนต์ผ่านตัวเลือก clientId

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

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

provideApolloClient

นอก setup ของคอมโพเนนต์ เช่น ภายในคอมโพสิเบิล ให้ใช้ provideApolloClient เพื่อทำให้ไคลเอนต์พร้อมใช้งานสำหรับการเรียก useQuery

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

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

การเพิ่มส่วนหัวการยืนยันตัวตน

API จริงจำเป็นต้องใช้โทเค็นยืนยันตัวตน กำหนดค่า headers ในตัวเลือกไคลเอนต์ หรือใช้ลิงก์ Apollo เพื่อแนบโทเค็นไปกับทุกคำขอ

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

การกำหนดค่าตัวเลือกเริ่มต้น

ฟิลด์ defaultOptions ใช้ปรับพฤติกรรมต่าง ๆ เช่น นโยบายการดึงข้อมูลเริ่มต้น ตัวอย่างเช่น กำหนดให้อ่านจากแคชก่อนเสมอ

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

การเขียนคำขอแรก

กำหนดคำขอด้วยแท็กเทมเพลต gql จาก @apollo/client/core แท็กนี้จะแยกวิเคราะห์สตริง GraphQL ให้เป็นเอกสารที่ Apollo เข้าใจ

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

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

การตรวจสอบการตั้งค่า

เมื่อส่งต่อไคลเอนต์แล้ว คอมโพเนนต์ใด ๆ ก็สามารถเรียก useQuery พร้อมเอกสารนั้นได้ หากมีข้อมูลส่งกลับมา แสดงว่าไคลเอนต์และตัวให้บริการของคุณเชื่อมต่ออย่างถูกต้อง

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

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

สรุป

คุณได้ตั้งค่า Apollo ใน Vue 3:

  • สร้าง ApolloClient ด้วย uri และ InMemoryCache
  • แคชจะปรับผลลัพธ์ให้อยู่ในรูปแบบมาตรฐานตามรหัสเอนทิตี
  • ส่งต่อด้วย DefaultApolloClient หรือใช้ ApolloClients หากมีหลายไคลเอนต์
  • ใช้ provideApolloClient ภายในคอมโพสิเบิล และกำหนดคำขอด้วย gql

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

บทเรียน “การตั้งค่า Apollo Client ใน Vue 3” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Apollo Client ใน Vue 3”

ApolloClient, InMemoryCache, provideApolloClient() และการตั้งค่า @vue/apollo-composable คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การตั้งค่า Apollo Client ใน Vue 3” ใช้เวลานานแค่ไหน

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

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

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

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

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