0Pricing
Vue Academy · Lekcja

Konfiguracja Apollo Client w Vue 3

ApolloClient, InMemoryCache, provideApolloClient() oraz konfiguracja @vue/apollo-composable.

Konfiguracja Apollo Client w Vue 3 to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

GraphQL z Vue

GraphQL pozwala klientowi poprosić w jednym żądaniu dokładnie o potrzebne dane. Apollo Client to najpopularniejszy klient GraphQL, a @vue/apollo-composable integruje go z Composition API Vue 3.

Instalowanie pakietów

Potrzebne są podstawowe biblioteki Apollo, parser GraphQL oraz warstwa composables dla Vue.

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

Tworzenie klienta

Klient Apollo potrzebuje serwerowego uri oraz pamięci podręcznej. InMemoryCache przechowuje wyniki zapytań, dzięki czemu kolejne odczyty są natychmiastowe.

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

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

Działanie pamięci podręcznej

InMemoryCache normalizuje odpowiedzi według identyfikatora encji. Gdy dwa zapytania zwracają ten sam obiekt, pamięć podręczna przechowuje go tylko raz, a jego aktualizacja odświeża każdy widok, który go używa.

Udostępnianie klienta

Zarejestruj klienta w całej aplikacji, aby każdy komponent mógł wykonywać zapytania. Klucz wstrzykiwania DefaultApolloClient podłącza go do Composition API.

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

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

Wiele klientów

W przypadku kilku punktów końcowych GraphQL udostępnij mapę ApolloClients i nadaj nazwę każdemu klientowi. Komponenty wybierają klienta za pomocą opcji clientId.

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

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

provideApolloClient

Poza funkcją setup komponentu — na przykład wewnątrz composable — użyj provideApolloClient, aby udostępnić klienta wywołaniom useQuery.

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

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

Dodawanie nagłówków uwierzytelniania

Rzeczywiste interfejsy API wymagają tokenu uwierzytelniającego. Skonfiguruj headers w opcjach klienta lub użyj łącza Apollo, aby dołączać token do każdego żądania.

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

Konfigurowanie opcji domyślnych

Pole defaultOptions dostosowuje takie zachowania jak domyślna polityka pobierania — na przykład zawsze odczytywanie danych najpierw z pamięci podręcznej.

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

Pisanie pierwszego zapytania

Zdefiniuj zapytanie za pomocą tagu szablonowego gql z @apollo/client/core. Analizuje on ciąg GraphQL i przekształca go w dokument rozumiany przez Apollo.

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

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

Weryfikowanie konfiguracji

Po udostępnieniu klienta każdy komponent może wywołać useQuery z tym dokumentem. Jeśli dane wracają, klient i provider są prawidłowo skonfigurowane.

Szybki test

Sprawdź swoją wiedzę na temat konfiguracji Apollo.

Podsumowanie

Skonfigurowano Apollo w Vue 3:

  • Utwórz ApolloClient z uri i InMemoryCache.
  • Pamięć podręczna normalizuje wyniki według identyfikatora encji.
  • Udostępnij klienta za pomocą DefaultApolloClient (lub ApolloClients w przypadku wielu klientów).
  • Używaj provideApolloClient wewnątrz composables, a zapytania definiuj za pomocą gql.

Często zadawane pytania

Czy lekcja „Konfiguracja Apollo Client w Vue 3” jest bezpłatna?

Tak — pełny tekst „Konfiguracja Apollo Client w Vue 3” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja Apollo Client w Vue 3”?

ApolloClient, InMemoryCache, provideApolloClient() oraz konfiguracja @vue/apollo-composable. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja Apollo Client w Vue 3”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja Apollo Client w Vue 3
  2. useQuery do pobierania danych
  3. useMutation do zmiany danych
  4. Subskrypcje czasu rzeczywistego z useSubscription
← Powrót do Vue Academy