(번역) #8a: Leveraging the Query Function Context

// inline-query-fn

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 는 전달 받은 상태를 클로저로 사용하는 인라인 함수입니다.
  return useQuery({
    queryKey: ['todos', state],
    queryFn: () => fetchTodos(state),
  });
};

// sorting-todos

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;
};

// useTodos-with-sorting

export const useTodos = () => {
  const { state, sorting } = useTodoParams();

  // 🚨 실수가 보이시나요? ⬇️
  return useQuery({
    queryKey: ['todos', state],
    queryFn: () => fetchTodos(state, sorting),
  });
};

// useInfiniteQuery

// 이게 QueryFunctionContext 입니다 ⬇️
const fetchProjects = ({ pageParam }) => fetch('/api/projects?cursor=' + pageParam);

useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
  initialPageParam: 0,
});

// query-function-context

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,
  });
};

// query-key-type-inference

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;
    },
  });
};

// typed-query-function-context

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,
  });
};

// weird-destruct

const [, , state, sorting] = queryKey;

// object-keys

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: [{ 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,
  });
};

// fuzzy-matching-with-object-keys

// 🕺 할 일 기능과 관련된 모든 것을 제거
queryClient.removeQueries({
  queryKey: [{ scope: 'todos' }],
});

// 🚀 모든 할 일 목록을 초기화
queryClient.resetQueries({
  queryKey: [{ scope: 'todos', entity: 'list' }],
});

// 🙌 모든 스코프에서 모든 할 일 목록을 무효화
queryClient.invalidateQueries({
  queryKey: [{ entity: 'list' }],
});