TIL

React

React-Query

Query Function Context

쿼리키는 쿼리 고유화 뿐만 아니라 쿼리 함수에 QueryFunctionContext 안에 함께 포함되어 전달된다.

React Query 공식문서

function Todos({ status, page }) {
  const result = useQuery({
    queryKey: ['todos', { status, page }],
    queryFn: fetchTodoList,
  });
}

// Access the key, status and page variables in your query function!
function fetchTodoList({ queryKey }) {
  const [_key, { status, page }] = queryKey;
  return new Promise();
}

QueryFunctionContext: 쿼리 함수에 전달되는 객체

• queryKey: QueryKey: Query Keys
• pageParam?: unknown
  • only for Infinite Queries
  • the page parameter used to fetch the current page
• signal?: AbortSignal
  • AbortSignal instance provided by TanStack Query
  • Can be used for Query Cancellation
• meta: Record<string, unknown> | undefined
  • an optional field you can fill with additional information about your query

다음과 같이 공식문서에 안내되어 있는데, 이 중 내가 오늘 학습하고 사용해야 하는 건 queryKey!

장점!

쿼리키에서 params를 접근해 사용할 수 있으므로, 쿼리 함수에 parameter를 넣은 형태를 전달하는 화살표 함수 같은 것을 만들지 않아도 된다.

추가적으로 쿼리키 생성 함수를 이용해 scope, entity로 범위별(?) 관리하며, 여기에 params를 넣어 의존성 추가를 하는 동시에 쿼리 함수에서 접근할 수 있도록 한다.

예제

interface UserParams {
  id: number;
}

function createUserKey(params: UserParams) {
  const queryKey = {
    scope: 'user',
    entity: 'info',
    params,
  };
  return [queryKey];
}

async function getUserInfo({ queryKey }: QueryFunctionContext<ReturnType<typeof createUserKey>>) {
  const [{ params }] = queryKey;
  const payload = {
    params,
    url: 'user/info',
  };
  const { data } = await Axios.GET<AllocationAvailableDateData>(payload);
  return data;
}

export function useUserInfo(params: userParams) {
  return useQuery({
    queryKey: createUserKey(params),
    queryFn: getUserInfo,
  });
}