[search] 버튼을 눌러서 검색하기

연관 내용
[검색 프로세스]
[자동으로 검색하기]

1. fetch 쿼리에 입력값으로 serch할 값을 추가한다.

const FETCH_BOARDS = gql`
  query fetchBoards($search: String, $page: Int) {
    fetchBoards(search: $search, page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;

2. search할 값을 담을 state를 만든다.

const [search, setSearch] = useState("");

const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
    setSearch(event.target.value);
  };

3. refetch를 사용할 수 있게 추가한다.

  const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

4. 검색 버튼을 누르면 refetch를 실행한다.

  const onClickSearch = () => {
    refetch({ search, page: 1 });
  };

<button onClick={onClickSearch}>검색하기</button>