React Query - 3 (쿼리 키)

Query Key

쿼리는 기본적으로 사용자가 부여한 유니크한 키값으로 구분되며, 프로미스 기반 메서드로 서버에서 데이터를 가져올 수 있다.

컴포넌트나 훅에서 쿼리를 구독하려면 useQuery를 호출해야 한다.

import {useQuery} from 'react-query'

function App () {
	const myInfo = useQuery('myInfos', fetchInfoList)
}

✅ useQuery의 첫번째 파라미터는 사용자가 설정한 고유키값이고, 두번째 파라미터는 정보를 fetch해올 함수이다.

여기에서 사용된 유니크한 키값인 myInfos는 어플리케이션 전체에서 쿼리를 가져오고, 캐싱하고, 공유하기 위해 내부적으로 사용된다.

이전에도 언급했지만, 리액트쿼리는 유저가 부여한 유니크한 키값을 기반으로 캐싱을 관리한다.

쿼리키는 문자열이 될 수도 있고, 문자 배열이 될 수도 있다.

문자열

• 가장 단순한 형태의 쿼리키이다. 쿼리키로 문자열이 전달되면 문자열을 사용하여 내부적으로 배열로 반환한다.

useQuery('myInfos', ...) // queryKey === ['myInfos']

🎆 React Query v4부터는 모든 키가 배열이어야 한다고 한다!

// 🚨 will be transformed to ['todos'] anyhow
useQuery('todos')
// ✅
useQuery(['todos'])

문자 배열

• 계층 구조의 데이터 / 파라미터가 있는 쿼리키이다.

 ✅ 각각의 todos
 useQuery(['todo', todo.id], ...)
 // queryKey === ['todo', todo.id]
 
 ✅ preview가 true인 todos
 useQuery(['todo', 5, { preview: true }], ...)
 // queryKey === ['todo', 5, { preview: true }]
 
 ✅ 할일이 완료된(done) todos
 useQuery(['todos', { type: 'done' }], ...)
 // queryKey === ['todos', { type: 'done' }]