📍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