프론트 110 - map boards

규링규링규리링·2024년 9월 15일

프론트 공부하기

목록 보기
110/135

게시글 한번에 여러개 받아오기

기존 사용했던 코드를 살짝 수정해서

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>)}

이런식으로 게시물 번호, 제목, 작성자를 출력이 가능하고
해당 글을 클릭하면 해당 글의 상세페이지로 이동하는 옵션도 넣을 수 있다.

이런식으로 여러가지 스타일도 넣어 줄 수 있음.

0개의 댓글