[TIL] Graphql & Apollo) 검색 기능

🧑🏻‍🏫 Intro

이번에 검색기능 티켓을 담당하게 되어 구현하게 되었는데
기존에는 REST API를 사용해서 검색기능을 구현했었는데,
이번에는 Graphql을 이용해서 구현하게 되었다.

사실 전혀 모르는 스펙이라서 공부를 하면서 진행하느라 상당히 시간이 촉박했다.
그래서 일단 구현해 보자 하는 마음으로 시작하게 되었다.

🧑🏻‍💻 과정

Graphql도 모르는데 Apollo는 또 뭘까...

간단히 얘기하면 Graphql을 편하게 사용하게 해주는 라이브러리가 Apollo라고 한다.
자세한 내용은 점차 점차 정리해 나가기로..!

schema를 통해서 원하는 데이터를 불러오려면
어떤 조건을 넘겨줘야 하는지에 대해서 나와 있었다.
검색하기 위해 넘겨줘야 하는 조건은 limit,offset,keyword 이 세가지였다.
해당 조건에 데이터를 넘겨주면, id와 title을 넘겨 받는 로직으로 구성했다.

나는 Apollo 라이브러리에 있는 useQuery를 이용해
해당 데이터를 아래와 같이 불러왔다.

💥 code

<쿼리문>
import { gql } from '@apollo/client';

export const GET_SEARCH_RESULT = gql`
  query($limit: Int, $offset: Int, $keyword: String!) {
	-------(limit: $limit, offset: $offset, keyword: $keyword) {
      id
      title
    }
  }
`;

<코드>
const { data } = useQuery(GET_SEARCH_RESULT, {
    variables: {
      offset: 0,
      limit: 10,
      keyword: searchValue,
    },
  });

GET_SEARCH_RESULT는 쿼리문이고, 아래 조건 중에 searchValue는 검색어가 되겠다.

📌 결과

결과 값은 잘 나왔다.
원하는 대로 데이터를 받는 것도 확인 했으나
해당 검색어에 일치하는 데이터가 10개 이상일 때,
무한 스크롤을 이용해서 데이터를 계속 붙여줘야 하는 이슈가 있었다.