useQuery (apollo)

#wip

https://www.apollographql.com/docs/react/data/queries

GPT-4.icon

🏃‍♂️ 基本の使い方

1. クエリを書く

GraphQLのクエリはgql関数で囲んで書きます。

code:tsx

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

const GET_DOGS = gql`

query GetDogs {

dogs {

breed

}

2. useQueryでクエリを実行

Reactコンポーネント内でuseQuery(GET_DOGS)を呼ぶだけ！

code:tsx

import { useQuery } from '@apollo/client';

function Dogs({ onDogSelected }) {

const { loading, error, data } = useQuery(GET_DOGS);

if (loading) return 'Loading...';

if (error) return Error! ${error.message};

return (

{data.dogs.map((dog) => (

{dog.breed}

</option>

))}

</select>

);

}

ポイント

loadingがtrueなら「Loading…」と表示

errorがあればエラーメッセージ

データが来たら表示！

⚡ Apollo Clientのすごいところ

✅ 自動キャッシュ

一度取得したデータはApolloのキャッシュに保存されます。

同じデータをまた取得するときは爆速になります。

✅ キャッシュの更新方法

Polling → 定期的にサーバーに問い合わせる

Refetching → 明示的に再取得（ボタンなどで）

code:tsx

// Polling (0.5秒ごとに更新)

useQuery(GET_DOG_PHOTO, { variables: { breed }, pollInterval: 500 });

// Refetchボタン

<button onClick={() => refetch()}>Refetch!</button>

🧩 useLazyQuery

通常のuseQueryは即時実行だけど、

useLazyQueryを使うとあとから好きなタイミングで実行できる！

code:tsx

const getDog, { loading, error, data } = useLazyQuery(GET_DOG_PHOTO);

<button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>

Get Bulldog Photo

</button>

🔎 fetchPolicy でキャッシュ戦略を変更できる

useQueryにはキャッシュ戦略を指定できるオプションがある。

主なfetchPolicy一覧：

table:table

fetchPolicy 説明

------------------- ------

cache-first (デフォルト) キャッシュ優先。なければネットワーク

network-only 毎回サーバーに問い合わせ

cache-only キャッシュだけ見る（サーバー問い合わせなし）

cache-and-network キャッシュ即時表示＋裏でサーバー問い合わせ

no-cache キャッシュ使わない＆保存もしない

standby 自動更新しない（特殊用途）

code:tsx

useQuery(GET_DOGS, { fetchPolicy: 'network-only' });

⚙️ nextFetchPolicy

最初だけnetwork-onlyで取得して、その後はcache-firstに自動で切り替えたいときなどに使える。

code:tsx

useQuery(GET_DOGS, {

fetchPolicy: 'network-only',

nextFetchPolicy: 'cache-first',

});

---

🎯 エラーハンドリングも柔軟

errorPolicyオプションでエラーの扱い方を指定できる

none（デフォルト） → エラーがあればデータ捨てる

all → エラーがあってもデータ使える範囲で使う