문제는 이렇게 시작됐다
나는 이제까지 restAPI밖에 사용해보지 않은 귀여운 주니어 개발자🐣인데 이번에 해보려는 미니 프로젝트가 GraphQL을 사용한다지 뭔가...!!!!!!!!
근데 어쩌겠음 해봐야지뭐
🚀Apollo Client 설치하기
yarn add @apollo/client graphql일단 시키는대로 해봤다.
- graphql : facebook에서 정의한 GraphQL을 JS 로 구현한 패키지
- @apollo/client : React에 Apollo Client를 연결해주는 패키지
이렇게 3가지를 설치해준다.
1.ApolloClient 초기화
//apollo-clients.js
import { ApolloClient, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
uri: "",
cache: new InMemoryCache(), //graph ql 에서 캐시 관리를 해줌
});
export default client;
루트 디렉토리에 apollo-clients.js 파일은 만들어서 ApolloClient 객체를 초기화 해준다.
2.ApolloClient Next.js에 연결
리액트 쿼리와 비슷하게 ApolloProvider 를 _app.jsx에 연결해준다.
//_app.jsx
import { ThemeProvider } from "styled-components";
import Theme from "../styles/Theme";
import GlobalStyle from "../styles/GlobalStyles";
import Layout from "./Layout";
import { ApolloProvider } from "@apollo/client";
import client from '../apollo-client';
function MyApp({ Component, pageProps }) {
return (
<ApolloProvider client={client}>
<ThemeProvider theme={Theme}>
<GlobalStyle />
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</ApolloProvider>
);
}
export default MyApp;
3.GraphQL API 호출
apollo client는 GraphQL 을 호출할때 useQuery, useMutation을 제공해준다.
어디서 많이본것같은 모양새 👀 리액트 쿼리를 사용해봐서 그런지 손쉽게 사용할수 있을듯 하다
//diary.jsx
import { useQuery, gql } from "@apollo/client";
const Diary = () => {
const GET_DIARY_LIST = gql`
query {
fetchBoards{
number,
title,
}
}
`
const { data, loading } = useQuery(GET_DIARY_LIST);
if (loading) {
return <h1>로딩중...</h1>
}
return (
<>
{data.fetchBoards.map((itme)=> <p key={item.number}>item.title</p>)}
</>
)
}
내가 지금 구현하는 페이지에 필요한 title과 number만 가져와서 useQuery 훅을 이용하여 데이터를 받아온다.
- query : 데이터를 가져올때 사용 rest의 'get'역할
- mutation : 데이터를 생성,수정,삭제할때 사용 rest의 post,put,patch,delete 역할
- subscription : 웹소켓을 사용해 실시간 양방향 통신을 구현할때 사용
4.데이터 수정
데이터를 추가,수정,삭제를 할때는 mutation 을 사용하면 된다.
const CREATE_DIARY = gql`
mutation createBoard($title: String $contents: String $writer: String) {
createBoard(title:$title contents:$contents writer:$writer){
number,
massage,
}
}
`일단 get 할때보다 더 복잡해졌다
초반에 어떻게 쓰는지 잘 몰라서 엉엉 울면서 했는데 방법을 알아냈다
일단 백엔드 API주소가 주어질건데 그걸로 playground에 들어가서 오른쪽 옆을보면 DOCS가 있다
고것을 눌러보면 쿼리들이 보이는데 Mutation 에서 지금 내가 쓸 createBoard를 눌러보면 return 값과 내가 주어야할 값이 나온다.
보면 Arguments에 writer:String, title:String,contents:String 으로 내가 데이터를 주어야 한다는 것이다.
그래서 위에서 CREATE_DIARY의 코드를 보면 mutation 옆에 createBoard(어쩌구저쩌구) 가 적혀있는데 mutation 옆에 적은 createBoard는 그냥 내가 임의로 적은 함수명(?) 이라고 생각하면 되기때문에 다른 이름으로 적어도 된다.
아무튼! 각각의 타입을 지정해준 뒤 그밑에 정말로 내가 해야할 엔드포인트 이름을 적고 괄호에 변수명들을 적어준다.
const [createDiary] = useMutation(CREATE_DIARY, {
onCompleted: () => {
alert('작성완료!')
router.push('/diary')
}
})
const onSubmit = () => {
const Title = titleRef.current.value;
const Content = contentRef.current.value;
createDiary({ variables: { title: Title, contents: Content, writer: '102' } })
}
<button onClick={onSubmit}>작성하기></button>그리고 버튼을 눌렀을때 onSubmit 이 실행되면서 title과 contents, writer 값을 createDiary에 variables로 전달해준다.
내가 mutation 에서 계속 오류가 났던것은 줘야하는 값들의 타입과 리턴되는 값들을 몰랐기 때문에 계속 오류가 났던것이다.
(진짜 ^^,,이런건 미리미리 공지해줘야 하는거 아니냐구요)
아무튼 알고보면 쉬운 Apollo Client 로 graph ql 이용해보기 끝!
