Vue Academy · レッスン

データ取得のためのuseQuery

useQuery(QUERY)、result、loading、error、variables、fetchPolicyオプション

「データ取得のためのuseQuery」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

useQueryによるクエリ実行

useQueryコンポーザブルはGraphQLクエリを実行し、リアクティブな状態を返します。変数が変更されると自動的に再フェッチし、キャッシュが変更されたときにも更新します。

基本的な使い方

gqlドキュメントを渡します。useQueryはresult、loading、errorのrefを返します。

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

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

結果の読み取り

resultはrefです。result.valueを通じてデータにアクセスします。クエリの形状とまったく同じ形でクエリレスポンスを保持しています。

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

ローディング状態とエラー状態

スピナーを表示するにはloadingを、メッセージを表示するにはerrorを使用します。どちらもリアクティブなrefで、リクエストの進行に応じて更新されます。

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

クエリ変数

2番目の引数として変数を渡します。変数の値が変更されるたびに、クエリが再実行されます。

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

リアクティブな変数

動的な変数には、変数オブジェクトを返す関数またはリアクティブなrefを渡します。参照しているrefが変更されると、クエリが自動的に再フェッチされます。

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

onResultフック

onResultは新しいデータが届くたびに実行されます。アナリティクスや別のストアとの同期などの副作用に便利です。

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

手動での再フェッチ

useQueryはrefetch関数を返します。この関数を使うと、外部での変更後や更新ボタンのクリック時など、必要なタイミングでクエリを再実行できます。

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

fetchMoreによるページネーション

fetchMoreは追加のページを読み込み、updateQueryを使って既存の結果にマージします。これは無限スクロールの基盤になります。

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

フェッチポリシー

fetchPolicyオプションはキャッシュの使用方法を制御します。cache-first（デフォルト）はネットワークより先にキャッシュを読み取り、network-onlyは常にサーバーへアクセスし、cache-and-networkはキャッシュを表示してから更新します。

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

条件付きクエリ

enabledオプションを使うと、条件が満たされるまでクエリを遅延できます。たとえば、idが選択されるまでフェッチしないように設定できます。

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

理解度チェック

useQueryに関する理解度を確認します。

まとめ

useQueryについて学びました。

リアクティブなresult、loading、errorを返します。
result.valueを通じてデータを読み取ります。
リアクティブ性が必要な場合は、オブジェクトまたは関数として変数を渡します。
refetch()は再実行、fetchMore()はページネーションを行い、fetchPolicyはキャッシュの使用方法を制御します。

よくある質問

「データ取得のためのuseQuery」レッスンは無料ですか？

はい。「データ取得のためのuseQuery」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「データ取得のためのuseQuery」で何を学びますか？

useQuery(QUERY)、result、loading、error、variables、fetchPolicyオプションブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「データ取得のためのuseQuery」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る