[Prisma] 검색 기능 추가 해보기 (feat. searchParmas & next.js)

1. 검색 창에 찾을려는 '제목' 을 입력

2. 제목 입력 성공시 router.push 를 통해 url에 ?title="제목" 을 넣어줌 => "/pathname?title="제목" 

const onSubmit = (data: FormProps) => {
        const { title } = data;
        router.push(`${pathname}?title=${title}`);
};

3. 나는 pathname에 접근하면 react-query를 통해 쿼리 키에 따라 데이터를 받아오도록 해놨었다.

4. useSearchParams를 통해 "title"을 get 해옴. 없다면 undefined. 

// /pathname component 

const searchParam = useSearchParams();
const { data, isError, isLoading } = useQueryContent({
    cType: 'subCategory',
    id: subCategory,
    selectedPage,
    searchTitle: searchParam.get('title') || undefined,
});

// useQueryContent - useQuery custom hook

// key = [cType, id, selectedPage, searchTitle]
const { data, isError, isLoading } = useQuery({
        queryKey: key,
        queryFn: async () => {
            const res = await fetchFn({ id, cType, selectedPage, searchTitle });
            return res;
        },
});

5. fetchFn 에서는 받아온 인자들을 통해 url을 꾸려서 /api 주소로 접촉을 시도함. 

const url = `/api/${cType}/${id}`;

const res = await axios({
    url,
    method: 'GET',
    params: {
        selectedPage,
        searchTitle,
    },
});

6. api route 에서는 검색 조건에 맞는 것들을 찾아 리턴하도록 했다.

찾을려는 post들은 subCategory에 속해 있어서 효율적인 검색을 위해 subCate로 prismaClient 접촉을 시도함.

이때 전체 페이지 넘버를 설정하기 위해 조건에 부합하는 post의 갯수또한 얻어올려고 했는데 상위 집합인 subCate에서 해당 posts를 찾기 어려워서 어쩔 수 없이 post.aggregate를 통해 _count를 가져옴 

const res = await db.subCategory.findFirst({
    	where: {
            name: subCategory,
        },
        select: {
            posts: {
                where: {
                    title: searchTitle
                        ? { contains: searchTitle }
                        : undefined,
                },
                take: 13,
                skip: 13 * (parseInt(selectedPage) - 1),

                orderBy: {
                    createdAt: 'desc',
                },
            },
        },
});
        
const postCounts = await db.post.aggregate({
        where: {
            subCategory: {
                name: subCategory,
        	},
	        title: searchTitle ? { contains: searchTitle } : undefined,
        },
        _count: true,
});

return NextResponse.json({
    posts: res?.posts,
    postCounts: postCounts._count,
});