0Pricing
Vue Academy · Lekcja

useQuery do pobierania danych

useQuery(QUERY), result, loading, error, variables oraz opcje fetchPolicy.

useQuery do pobierania danych to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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.

Wykonywanie zapytań za pomocą useQuery

Composable useQuery wykonuje zapytanie GraphQL i zwraca reaktywny stan. Automatycznie ponownie pobiera dane po zmianie zmiennych i aktualizuje się po zmianach w pamięci podręcznej.

Podstawowe użycie

Przekaż dokument gql. useQuery zwraca refy result, loading i error.

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

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

Odczytywanie wyniku

result jest refem. Uzyskaj dostęp do danych przez result.value — zawiera on odpowiedź na zapytanie o strukturze dokładnie odpowiadającej zapytaniu.

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

Stany ładowania i błędu

Użyj loading, aby wyświetlić wskaźnik ładowania, a error, aby wyświetlić komunikat. Oba są reaktywnymi refami, które aktualizują się w miarę postępu żądania.

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

Zmienne zapytania

Przekaż zmienne jako drugi argument. Zapytanie zostanie ponownie wykonane za każdym razem, gdy zmieni się wartość zmiennej.

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

Reaktywne zmienne

W przypadku zmiennych dynamicznych przekaż funkcję zwracającą obiekt zmiennych albo reaktywny ref. Gdy zmieni się używany ref, zapytanie zostanie automatycznie wykonane ponownie.

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

Hook onResult

onResult uruchamia się za każdym razem, gdy nadejdą nowe dane — jest to przydatne w przypadku efektów ubocznych, takich jak analityka lub synchronizacja z innym magazynem.

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

Ręczne ponowne pobieranie

useQuery zwraca funkcję refetch, która pozwala ponownie wykonać zapytanie na żądanie — po zewnętrznej zmianie lub kliknięciu przycisku odświeżania.

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

Paginacja za pomocą fetchMore

fetchMore ładuje kolejne strony i scala je z istniejącym wynikiem za pomocą updateQuery — to podstawa nieskończonego przewijania.

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

Polityki pobierania

Opcja fetchPolicy steruje użyciem pamięci podręcznej: cache-first (domyślna) odczytuje pamięć podręczną przed wykonaniem żądania sieciowego, network-only zawsze odwołuje się do serwera, a cache-and-network najpierw pokazuje zawartość pamięci podręcznej, a następnie ją odświeża.

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

Warunkowe zapytania

Użyj opcji enabled, aby opóźnić wykonanie zapytania do momentu spełnienia warunku — na przykład nie pobierać danych, dopóki nie zostanie wybrane id.

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

Szybki test

Sprawdź swoją wiedzę na temat useQuery.

Podsumowanie

Wiesz już, jak działa useQuery:

  • Zwraca reaktywne result, loading i error.
  • Dostęp do danych uzyskuje się przez result.value.
  • Zmienne można przekazać jako obiekt lub funkcję, aby zachować reaktywność.
  • refetch() ponownie wykonuje zapytanie, fetchMore() obsługuje paginację, a fetchPolicy steruje użyciem pamięci podręcznej.

Często zadawane pytania

Czy lekcja „useQuery do pobierania danych” jest bezpłatna?

Tak — pełny tekst „useQuery do pobierania danych” 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 „useQuery do pobierania danych”?

useQuery(QUERY), result, loading, error, variables oraz opcje fetchPolicy. Ć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 2 z 4.

Ile czasu zajmuje lekcja „useQuery do pobierania danych”?

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