(번역) #8: Effective React Query Keys

useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
});

// 🚨 동작하지 않을 것입니다
useInfiniteQuery({
  queryKey: ['todos'],
  queryFn: fetchInfiniteTodos,
});

// ✅ 대신 다른 키를 사용하세요
useInfiniteQuery({
  queryKey: ['infiniteTodos'],
  queryFn: fetchInfiniteTodos,
});

// imperative-refetch

function Component() {
  const { data, refetch } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })

  // ❓ 데이터를 다시 불러오려면 매개변수를 어떻게 전달해야 할까요❓
  return <Filters onApply={() => refetch(???)} />
}

// query-key-drives-the-query

function Component() {
  const [filters, setFilters] = React.useState();
  const { data } = useQuery({
    queryKey: ['todos', filters],
    queryFn: () => fetchTodos(filters),
  });

  // ✅ 로컬 상태를 설정하고 상태를 통해 쿼리를 조작하세요
  return <Filters onApply={setFilters} />;
}

-src
  - features
    - Profile
      - index.tsx
      - queries.ts
    - Todos
      - index.tsx
      - queries.ts;

// always-use-array-keys

// 🚨 어쨌든 ['todos'] 로 변환될 것입니다
useQuery({ queryKey: 'todos' });
// ✅
useQuery({ queryKey: ['todos'] });

['todos', 'list', { filters: 'all' }][('todos', 'list', { filters: 'done' })][('todos', 'detail', 1)][
  ('todos', 'detail', 2)
];

// updates-from-mutation-responses

function useUpdateTitle() {
  return useMutation({
    mutationFn: updateTitle,
    onSuccess: (newTodo) => {
      // ✅ 할 일 상세정보를 업데이트
      queryClient.setQueryData(['todos', 'detail', newTodo.id], newTodo);

      // ✅ 해당 할 일을 포함하고 있는 모든 목록을 업데이트
      queryClient.setQueriesData(['todos', 'list'], (previous) =>
        previous.map((todo) => (todo.id === newTodo.id ? newtodo : todo)),
      );
    },
  });
}

// invalidate-all-lists

function useUpdateTitle() {
  return useMutation({
    mutationFn: updateTitle,
    onSuccess: (newTodo) => {
      queryClient.setQueryData(['todos', 'detail', newTodo.id], newTodo);

      // ✅ 모든 목록을 무효화
      queryClient.invalidateQueries({
        queryKey: ['todos', 'list'],
      });
    },
  });
}

// combine

function useUpdateTitle() {
  // url에서 현재 필터를 추출하여 반환하는 가상의 커스텀 훅
  const { filters } = useFilterParams();

  return useMutation({
    mutationFn: updateTitle,
    onSuccess: (newTodo) => {
      queryClient.setQueryData(['todos', 'detail', newTodo.id], newTodo);

      // ✅ 현재 보고있는 목록을 업데이트
      queryClient.setQueryData(['todos', 'list', { filters }], (previous) =>
        previous.map((todo) => (todo.id === newTodo.id ? newtodo : todo)),
      );

      // 🥳 모든 목록을 무효화하지만,
      // 활성화 되어있는 항목은 다시 불러오지 않습니다
      queryClient.invalidateQueries({
        queryKey: ['todos', 'list'],
        refetchActive: false,
      });
    },
  });
}

// query-key-factory

const todoKeys = {
  all: ['todos'] as const,
  lists: () => [...todoKeys.all, 'list'] as const,
  list: (filters: string) => [...todoKeys.lists(), { filters }] as const,
  details: () => [...todoKeys.all, 'detail'] as const,
  detail: (id: number) => [...todoKeys.details(), id] as const,
};

// examples

// 🕺 할 일 기능과 관련된 모든 것을 제거합니다
queryClient.removeQueries({
  queryKey: todoKeys.all,
});

// 🚀 모든 목록을 무효화합니다
queryClient.invalidateQueries({
  queryKey: todoKeys.lists(),
});

// 🙌 하나의 할 일을 미리 불러옵니다
queryClient.prefetchQueries({
  queryKey: todoKeys.detail(id),
  queryFn: () => fetchTodo(id),
});