Next.js app router에서 React Query 사용하면서 고민했던 것들

서비스별로 Colocate

/** service/photo/usePhotoService.ts */

import { useQuery } from '@tanstack/react-query';

import queryOptions from '@/service/photo/queries';

export function usePhotos() {

  return useQuery(queryOptions.all());

}

export function usePhoto({photoId}: {photoId: number}) {

  return useQuery(queryOptions.detail(photoId));

}

export function useComments({photoId}: {photoId: number}) {

  return useQuery(queryOptions.comments(photoId));

}

export function useComment({photoId, commentId}: {photoId: number, commentId: number}) {

  return useQuery(queryOptions.comment({photoId, commentId}));

}