기존 사용했던 코드를 살짝 수정해서
import { gql, useQuery } from "@apollo/client" const FETCH_BOARDS = gql` query{ fetchBoards{ id writer title contents } } ` export default function MapBoardsPage() { const { data } = useQuery(FETCH_BOARDS) console.log(data?.fetchBoards) return ( <div> </div> ) }보내는 값 없이 동작시키면 모든 글들을 가져오도록 설정
잘 받아옴
이제 이 내용을 화면에 div로 출력해 보자.return( {data?.fetchBoards.map(el => <div>{el.id} {el.title} {el.writer}</div>)}
이런식으로 게시물 번호, 제목, 작성자를 출력이 가능하고
해당 글을 클릭하면 해당 글의 상세페이지로 이동하는 옵션도 넣을 수 있다.
이런식으로 여러가지 스타일도 넣어 줄 수 있음.