useQuery

code:ts

useQuery('KEY', () => APIリクエスト処理, {オプション})

第一引数

Query Keysを決める

Query Keysとは

クエリキーに基づき、クエリキャッシュを管理するもの。

useQueryに対し、一意でないといけない。

1. シンプルなQuery Keys

code:ts

// A list of todos

useQuery({ queryKey: 'todos', ... })

// Something else, whatever!

useQuery({ queryKey: 'something', 'special', ... })

2. 変数を含める場合

同一のエンドポイントだが、クエリパラメータを使用したり、ページネーションする場合は変数をいれる

Query Keysの第二引数に変数をいれてあげないと、ページが変わっても同じクエリとみなされ、APIコールがされなくなってしまう

code:ts

(page: number) => {

useQuery(

'get_list', page, // <- 画面側からページネーションの結果を渡す。

() => {

fetch(/list?page=${page})

}, {...})

}

3. Query Keys are hashed deterministically!

code:ts

useQuery({ queryKey: 'todos', { status, page }, ... })

useQuery({ queryKey: 'todos', { page, status }, ...})

4. If your query function depends on a variable, include it in your query key

code:ts

function Todos({ todoId }) {

const result = useQuery({ queryKey: 'todos', todoId, queryFn: () => fetchTodoById(todoId) })

}

むしろ、2で書いてる内容はこっちか？🤔

第二引数

APIリクエスト処理（GraphQLでも、RESTAPIでも）