Effective Query Key

const QUERY_KEYS = {
	LIST : ['LIST'],
	DETAIL : ['DETAIL']
}
 
// 세분화가 필요없는 쿼리의 경우 이렇게 가능합니다
const { data } = useQuery({
	queryKey: QUERY_KEYS.LIST,
	queryFn: () => fetchList()
})
 
const mutate = useMutation({
	...
	onSuccess: () => {
		queryClient.invalidateQuries({ queryKey : QUERY_KEYS.LIST })
	}
})
 
// 세분화가 필요한 쿼리의 경우엔 불편함이 다가옵니다
const { data } = useQuery({
	queryKey: [...QUERY_KEYS.DETAIL, id],
	queryFn: () => fetchDetailByID(id)
})
 
// 엄청 머나먼 코드의 위치!
 
const mutate = useMutation({
	...
	onSuccess: () => {
		// 외부에서 사용할때 queryKey의 구조를 개발자가 기억해야합니다.
		// 앗! 실수
		queryClient.invalidateQuries({ queryKey : [id, ...QUERY_KEYS.DETAIL] })
	}
})

export function hashQueryKeyByOptions<TQueryKey extends QueryKey = QueryKey>(
  queryKey: TQueryKey,
  options?: Pick<QueryOptions<any, any, any, any>, 'queryKeyHashFn'>
): string {
  const hashFn = options?.queryKeyHashFn || hashKey;
  return hashFn(queryKey);
}
 
/**
 * Default query & mutation keys hash function.
 * Hashes the value into a stable hash.
 */
export function hashKey(queryKey: QueryKey | MutationKey): string {
  return JSON.stringify(queryKey, (_, val) =>
    isPlainObject(val)
      ? Object.keys(val)
          .sort()
          .reduce((result, key) => {
            result[key] = val[key];
            return result;
          }, {} as any)
      : val
  );
}

export function partialDeepEqual(a: any, b: any): boolean {
  if (a === b) {
    return true;
  }
 
  if (typeof a !== typeof b) {
    return false;
  }
 
  if (a && b && typeof a === 'object' && typeof b === 'object') {
    return !Object.keys(b).some((key) => !partialDeepEqual(a[key], b[key]));
  }
}

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

// 🕺 remove everything related
// to the todos feature
queryClient.removeQueries({
  queryKey: todoKeys.all
});
 
// 🚀 invalidate all the lists
queryClient.invalidateQueries({
  queryKey: todoKeys.lists()
});
 
// 🙌 prefetch a single todo
queryClient.prefetchQueries({
  queryKey: todoKeys.detail(id),
  queryFn: () => fetchTodo(id)
});

import { createQueryKeyStore } from '@lukemorales/query-key-factory'
 
export const queryKeys = createQueryKeyStore({
  users: null,
  todos: {
    detail: (todoId: string) => [todoId],
    list: (filters: TodoFilters) => ({
      queryKey: [{ filters }],
      queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
    }),
  },

const PostApi = {
  list: (): Promise<Post[]> => fetch('/api/list').then((res) => res.json()),
  get: (id: number): Promise<Post> => fetch(`/api/get/${id}`).then((res) => res.json()),
  search: ({ keyword }: { keyword: string }): Promise<Post> =>
    fetch(`/api/search?keyword=${keyword}`).then((res) => res.json())
};

// 인터페이스 선언
interface Post {
  id: number;
  title: string;
  description: string;
  content: string;
  draft: boolean;
  createdAt: Date;
}
 
// API 계층 코드
const PostAPI = {
  list: ():  Promise<Post[]> => fetch("/api/list").then((res) => res.json()),
  get: ({ id } : { id: number }): Promise<Post> => fetch(`/api/get/${id}`).then((res) => res.json()),
  search: ({ keyword }: { keyword: string }) :as Promise<Post[]> =>
    fetch(`/api/search?keyword=${keyword}`).then((res) => res.json()),
};
 
// Query Options 생성
const PostQueryOptions = createQueryOptions("post", PostAPI);
 
// 사용
PostQueryOptions.all().queryKey; // [{"scope": "post"}]
PostQueryOptions.type("list").queryKey; // [{"scope": "post", "type": "list"}]
PostQueryOptions.list().queryKey; // [{"scope": "post", "type": "list" }]
PostQueryOptions.get({id : 1}).queryKey; // [{"scope": "post", "type": "get", "id": 1}]
PostQueryOptions.search({ keyword: "react" }).queryKey; // [{ "scope": "post", "type": "search","keyword": "react"}]

export function SuspenseUserLotusPagination({ page = 1 }: { page?: number }) {
  // 바뀌기 전에 매우 길고 끔찍한 Query Hook 네이밍
  // 필요한 쿼리마다 재작성 필요
  const { data: lotusList } = useUserLotusListSuspenseQuery({ page });
  const navigate = useNavigate();
 
  return (
    <Pagination
      totalPages={lotusList?.page?.max ?? 1}
      initialPage={page}
      onChangePage={(page) => navigate({ to: '/user', search: { page } })}
    />
  );
}

export function SuspenseUserLotusPagination({ page = 1 }: { page?: number }) {
  // 직관적인 네이밍과 효과적인 재사용
  const { data: lotusList } = useSuspenseQuery(userQueryOptions.lotusList({ page }));
  const navigate = useNavigate();
 
  return (
    <Pagination
      totalPages={lotusList?.page?.max ?? 1}
      initialPage={page}
      onChangePage={(page) => navigate({ to: '/user', search: { page } })}
    />
  );
}
 
// 유저의 Lotus 리스트 쿼리 무효화
queryClient.invalidateQueries(userQueryOptions.type('lotusList'));

export const useUserQuery = () => {
  const query = useQuery({
    queryKey: ['user'],
    queryFn: getUserInfo,
    retry: 1
  });
 
  return query;
};
 
export const useUserSuspenseQuery = () => {
  const query = useSuspenseQuery({
    queryKey: ['user'],
    queryFn: getUserInfo
  });
 
  return query;
};

 
const query = useQuery({
  ...userQueryOptions.get({ id : 1 })
  retry: 1
});
 
const query = useSuspenseQuery(userQueryOptions.get({ id : 1 }));
 

export function SuspenseLotusPagination({ page = 1 }: { page?: number }) {
  const { data: lotusList } = useLotusListSuspenseQuery({ page });
 
  const navigate = useNavigate();
 
  return (
    <Pagination
      totalPages={lotusList?.page?.max ?? 1}
      initialPage={page}
      onChangePage={(page) => navigate({ to: '/lotus', search: { page } })}
    />
  );
}
 
export function SuspenseUserLotusPagination({ page = 1 }: { page?: number }) {
  const { data: lotusList } = useUserLotusListSuspenseQuery({ page });
 
  const navigate = useNavigate();
 
  return (
    <Pagination
      totalPages={lotusList?.page?.max ?? 1}
      initialPage={page}
      onChangePage={(page) => navigate({ to: '/user', search: { page } })}
    />
  );
}

export function SuspenseLotusPagination({queryOptions} : {queryOptions : LotusListQueryOptions) {
  const { data: lotusList } = useSuspenseQuery(queryOptions);
  const navigate = useNavigate();
 
  return (
    <Pagination
      totalPages={lotusList?.page?.max ?? 1}
      initialPage={page}
      onChangePage={(page) => navigate({ to: '/user', search: { page } })}
    />
  );
}
 
// 사용자의 LotusList Pagenation
<SuspenseLotusPagination queryOptions={userQueryOptions.lotusList({ page: 1 })} />;
 
// 전체 LotusList Pagenation
<SuspenseLotusPagination queryOptions={lotusQueryOptions.list({ page: 1 })} />;