kollog

2025.01.05

TanStack QueryのQuery keysって何

TanStack Query

TanStack QueryのQuery keysって何

Query Keys | TanStack Query React Docs tanstack.com
At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a single string, or as complex as...

このページの冒頭に、この様に書いてある。

At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a single string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and unique to the query’s data, you can use it!

特に重要な点をピックアップする。

  • Query keysは、配列である必要がある。
  • Query keysは、シリアライズ可能である必要がある。
  • Query keysは、クエリのデータに対して一意である必要がある。

TanStack QueryのQuery keysの一意性

まず、これらは同じクエリとみなされる。

seQuery({ queryKey: ['todos', { status, page }], ... })
useQuery({ queryKey: ['todos', { page, status }], ...})
useQuery({ queryKey: ['todos', { page, status, other: undefined }], ... })

一方、これらは異なるクエリとみなされる。シンプルな配列の場合、順序が重要。

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

Query keysの従属性

クエリによってキャッシュされるデータが特定のパラメータに依存している場合、そのパラメータをQuery keysに含める必要がある。

例えば、こういう関数があるとする。この場合、queryFn に渡す fetchTodoById によって取得されるデータは todoId に依存している。
そのため、todoId を Query keys に含めることで todoId が変わると、それに応じてキャッシュされるデータも変わる。

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

さらに読みたい