useQuery (apollo)
GPT-4.icon
🏃♂️ 基本の使い方
1. クエリを書く
GraphQLのクエリはgql関数で囲んで書きます。
code:tsx
import { gql } from '@apollo/client';
const GET_DOGS = gql`
query GetDogs {
dogs {
id
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 (
<select onChange={onDogSelected}>
{data.dogs.map((dog) => (
<option key={dog.id} value={dog.breed}>
{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>