1주차 총 정리
GRAPHQL-API를 통해 데이터를 작성할때
내가 입력한 값이 state값에 저장이 된다.
그리고나서 버튼을 등록하기 버튼을 누르면
state값을 이용해 각각의 api속성에 값을 할당하고
만들어진 id값을 통해 Read파일로 이동한다여기에서 알 수 있는점은
다른 페이지로 넘어가기 위해 router를 이용했고,
다른 페이지로 넘어가기 위해 동적라우팅 폴더에 있는 정보를 통해서
넘어가야 하는데 , 필요로 하는 정보는 createBoard API의 id값이였다.그래서 import해야하는 것들은
import { useMutation , gql } from "@apollo/client" import { useRouter } from "next/router" import { useState } from "react"
이것들이다.
GRAPHQL-API를 통해 데이터를 읽어올때
값을 불러와서 화면에 보여주기 위해서
값을 조회하는 fetchBoard라는 Query API와
값을 조회하기위해 필요한 id값을 가져오기위해 router를 이용했다.먼저 값을 조회해야하니
const FETCH_BOARD = gql` query fetchBoard($boardId:ID!) { fetchBoard(boardId:$boardId) { writer title contents } } `
fetchBoard API를 이용해 값을 조횔할 준비는 끝났고,
조회를 하려면 boardId라는 값이 필요한데,
boardId값은 동적라우팅폴더안에 있는 정보를 이용해서 가져와야하기 때문에import { useRouter } from "next/router" import { useQuery } from "@apollo/client" const { data } = useQuery(FETCH_BOARD , { variables: {boardId: router.query.동적라우팅폴더이름} })
variables 값에 동적라우팅 폴더안에 있는 정보를 넣어주었다.
근데 useMutation에서 했던것과 달리 useQuery에서는
const { data } = useQuery(FETCH_BOARD , { variables: {boardId: router.query.동적라우팅폴더이름} })
useQuery안에 FETCH_BOARD 쉼표하고 값을 주었는데,
그 이유는 데이터를 받아와서 화면에 보여주어야하는 Read파일은
열리자마자 데이터를 받아와야하기때문에 즉시 실행 하려고
코드를 저렇게 짠것임.HTML에는 데이터를 옵셔널체이닝을 통해서 받아오는데,
<ProfileName>{data?.fetchBoard.writer}</ProfileName>
data가 존재하면 값을 받아오고, 아니면 실행 안하게끔 하면 된다.
여기서 알 수 있는점은 데이터를 받아오는 fetchBoard API를 쓸땐,
값을 받아오기 위해 useQuery를 사용했고,
값을 받아오려면 동적라우팅 폴더에 있는 id값을 받아와야하니까
router를 사용했다.
Error의 원인들
- 오타
- styled css 태그를 써놓고 css정의를 안한경우
- 경로 설정 잘못한경우
- 개념을 잘못 이해하고 코딩했을때
Author And Source
이 문제에 관하여(1주차 총 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@byungjin0120/1주차-총-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)