[vue-query] query key 관련 공식문서 정리

📍Query Key의 형태

- 직렬화가 가능한 값들의 배열이어야 함

- 직렬화가 가능하다 => json.stringify()를 적용할 수 있고, 적용하면 항상 동일한 문자열로 변환된다

// 일반적인 배열
const userQueryKey = ["user", 1];
// JSON.stringify(usersQueryKey) // '["user",1]'

// 객체
const postQueryKey = ["user", { id: 42 }];
// JSON.stringify(postQueryKey) // '["post",{"id":42}]'

// An individual todo
useQuery({ queryKey: ['todo', 5], ... })

// An individual todo in a "preview" format
useQuery({ queryKey: ['todo', 5, { preview: true }], ...})

// A list of todos that are "done"
useQuery({ queryKey: ['todos', { type: 'done' }], ... })

 

 

📍Query Key 배열의 순서

- 배열의 순서는 중요하고, 배열 원소의 객체 내 프로퍼티 순서는 중요하지 않다!

- 아래는 객체 내부에서만 변화가 있으므로 모두 같은 쿼리로 인식된다

useQuery({ 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], ...})

 

- 이는 쿼리 키 배열이 결국 hash되기 때문이다

 

📍인사이트

- 쿼리 키 배열에 다양한 값을 넣는 경우, 객체로 표기해도 좋을 것 같다 (객체 내에서 순서가 달라져도 괜찮아서)

 

📍링크

https://tanstack.com/query/latest/docs/framework/vue/guides/query-keys#simple-query-keys