[ 38 ] 페이지네이션-1

graphQL 의 refetch 복습정리 

1.  Mutation 이후 refetch 하기 

// 쿼리문

const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

const DELETE_BOARD = gql`
  mutation deleteBoard($number: Int) {
    deleteBoard(number: $number) {
      message
    }
  }
`;

  const [deleteBoard] = useMutation(DELETE_BOARD);

  const onClickDelete = async (e) => {
    const result = await deleteBoard({
      variables: {
        number: Number(e.target.id),
      },
      refetchQueries: [{ query: FETCH_BOARDS }],
    });
    console.log(result.data.deleteBoard.message);
  };

2. Query 이후 refetch 하기

// 쿼리문

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



 const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);
  
  
    const onClickPage = (e: MouseEvent<HTMLSpanElement>): void => {
    refetch({ page: Number(e.currentTarget.id) });
  };

페이지 번호 표시하기 

리팩토링 전

  const onClickPage = (e: MouseEvent<HTMLSpanElement>): void => {
    refetch({ page: Number(e.currentTarget.id) });
  };
  
  return(
  
	      {[1, 2, 3, 4, 5, 6].map((el) => {
        return (
          <span key={el} id={String(el)} onClick={onClickPage}>
            {el}
          </span>
        );
      })}
      
  )

리팩토링 후 

  const onClickPage = (e: MouseEvent<HTMLSpanElement>): void => {
    refetch({ page: Number(e.currentTarget.id) });
  };
  
  return(
  
        {new Array(10).fill(1).map((_, index) => {
        return (
          <span key={index + 1} id={String(index + 1)} onClick={onClickPage}>
            {index + 1}
          </span>
        );
      })}
      
  )