🔥 쿼리 함수 컨텍스트 활용하기

type State = 'all' | 'open' | 'done'
type Todo = {
  id: number
  state: TodoState
}
type Todos = ReadonlyArray<Todo>
 
const fetchTodos = async (state: State): Promise<Todos> => {
  const response = await axios.get(`todos/${state}`)
  return response.data
}
 
export const useTodos = () => {
  // 현재 사용자 선택을 어딘가에서 가져온다고 가정합니다
  // 예를 들어 URL에서 가져올 수 있습니다
  const { state } = useTodoParams()
 
  // ✅ queryFn은 전달된 state를 클로저로 감싸는 인라인 함수입니다
  return useQuery({
    queryKey: ['todos', state],
    queryFn: () => fetchTodos(state),
  })
}
 
typescript복사

type Sorting = 'dateCreated' | 'name'
const fetchTodos = async (
  state: State,
  sorting: Sorting
): Promise<Todos> => {
  const response = await axios.get(`todos/${state}?sorting=${sorting}`)
  return response.data
}
 
typescript복사

export const useTodos = () => {
  const { state, sorting } = useTodoParams()
 
  // 🚨 실수를 찾을 수 있나요? ⬇️
  return useQuery({
    queryKey: ['todos', state],
    queryFn: () => fetchTodos(state, sorting),
  })
}
 
typescript복사

// 이것이 QueryFunctionContext입니다 ⬇️
const fetchProjects = ({ pageParam }) =>
  fetch('/api/projects?cursor=' + pageParam)
 
useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
  initialPageParam: 0,
})
 
typescript복사

const fetchTodos = async ({ queryKey }) => {
  // 🚀 queryKey에서 모든 매개변수를 가져올 수 있습니다
  const [, state, sorting] = queryKey
  const response = await axios.get(`todos/${state}?sorting=${sorting}`)
  return response.data
}
 
export const useTodos = () => {
  const { state, sorting } = useTodoParams()
 
  // ✅ 매개변수를 수동으로 전달할 필요가 없습니다
  return useQuery({
    queryKey: ['todos', state, sorting],
    queryFn: fetchTodos,
  })
}
 
typescript복사

export const useTodos = () => {
  const { state, sorting } = useTodoParams()
 
  return useQuery({
    queryKey: ['todos', state, sorting] as const,
    queryFn: async ({ queryKey }) => {
      const response = await axios.get(
        // ✅ queryKey가 튜플이므로 안전합니다
        `todos/${queryKey[1]}?sorting=${queryKey[2]}`
      )
      return response.data
    },
  })
}
 
typescript복사

const todoKeys = {
  all: ['todos'] as const,
  lists: () => [...todoKeys.all, 'list'] as const,
  list: (state: State, sorting: Sorting) =>
    [...todoKeys.lists(), state, sorting] as const,
}
 
const fetchTodos = async ({
  queryKey,
}: // 🤯 팩토리에서 나온 키만 받아들입니다
QueryFunctionContext<ReturnType<typeof todoKeys['list']>>) => {
  const [, , state, sorting] = queryKey
  const response = await axios.get(`todos/${state}?sorting=${sorting}`)
  return response.data
}
 
export const useTodos = () => {
  const { state, sorting } = useTodoParams()
 
  // ✅ 팩토리로 키를 만듭니다
  return useQuery({
    queryKey: todoKeys.list(state, sorting),
    queryFn: fetchTodos
  })
}
 
typescript복사

const [, , state, sorting] = queryKey
 
typescript복사

const todoKeys = {
  // ✅ 모든 키는 정확히 하나의 객체를 포함하는 배열입니다
  all: [{ scope: 'todos' }] as const,
  lists: () => [{ ...todoKeys.all[0], entity: 'list' }] as const,
  list: (state: State, sorting: Sorting) =>
    [{ ...todoKeys.lists()[0], state, sorting }] as const,
}
 
const fetchTodos = async ({
  // ✅ queryKey에서 이름으로 속성을 추출합니다
  queryKey: [{ state, sorting }],
}: QueryFunctionContext<ReturnType<typeof todoKeys['list']>>) => {
  const response = await axios.get(`todos/${state}?sorting=${sorting}`)
  return response.data
}
 
export const useTodos = () => {
  const { state, sorting } = useTodoParams()
 
  return useQuery({
    queryKey: todoKeys.list(state, sorting),
    queryFn: fetchTodos
  })
}
 
typescript복사

// 🕺 할 일 기능과 관련된 모든 것을 제거합니다
queryClient.removeQueries({
  queryKey: [{ scope: 'todos' }]
})
 
// 🚀 모든 할 일 목록을 초기화합니다
queryClient.resetQueries({
  queryKey: [{ scope: 'todos', entity: 'list' }]
})
 
// 🙌 모든 범위에 걸쳐 모든 목록을 무효화합니다
queryClient.invalidateQueries({
  queryKey: [{ entity: 'list' }]
})
 
typescript복사