GraphQL을 간단하게 경험해보기 위해 공용 API에 접근해보기.
0. 사용할 공용 GraphQL API
릭앤모티api. 캐릭터목록, 에피소드 등을 반환해준다. 간단해서 사용해보기 좋을 것 같아 선택.
graphql로도 지원하기 때문에 플레이그라운드로 경험해볼 수 있다. query와 mutation이 가능.
1. project 생성
create-react-app으로 생성해줌
$ create-react-app test-graphql
2. API에 query요청 보내기
fetch를 이용해 보내는 방법
method는 POST로, headers에 json타입을 명시, body에 query를 담아 요청을 보냄
한 줄로 처리해야 하는 것 같다.. 가독성이 안 좋음..
apollo-fetch를 이용해 보내는 방법
apollo-fetch를 이용하면 쿼리에 동적인 인자값을 담아 보내는 것이 더욱 편리해진다.
나중엔 apollo-client?를 사용해봐야겠다.
$ npm i apollo-fetch
variables라는 변수에 인자값을 json형태로 담을 수 있다.. currPage라는 state값을 담아 동적으로 요청한다.
처음에 variables를 잘못 줘서 syntax error가 많이 났는데, 밑에 형식처럼 보내면 된다.
전체코드▼
더보기
import React, {useEffect, useState} from 'react';
import { createApolloFetch } from 'apollo-fetch';
import './App.css';
function App() {
const [episodes, setEpisodes] = useState([]);
const [characters, setCharacters] = useState([]);
const [currPage, setCurrPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const fetchAPI = () => {
fetch('https://rickandmortyapi.com/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(
{ query: '{ characters{info{count} results{id name gender image}}}' }
)
})
.then(res => res.json())
.then(data => {
console.log(data.data.characters.results)
setCharacters(data.data.characters.results);
});
}
const getEpisodes = async () => {
setIsLoading(true);
const uri = 'https://rickandmortyapi.com/graphql';
const apolloFetch = createApolloFetch({uri: uri});
const query = `query Episodes($page: Int){
episodes(page: $page){
info {
count
}
results {
id
name
episode
characters {
id
name
image
}
}
}
}`;
const variables = {page: currPage};
await apolloFetch( { query, variables })
.then(res => res.data)
.then(res => {
setEpisodes(res.episodes.results)
});
setIsLoading(false);
}
useEffect(() => {
//fetchAPI();
getEpisodes();
},[currPage])
return (
<div className="App">
<h1 className="title">GraphQL test With Public Rick and Morty API</h1>
{isLoading?<h2>Loading...</h2>:
<ul>
{episodes.map((ep) =>
<li key={ep.id}>
<h3>#{ep.episode} | {ep.name}</h3>
<div>
<h4>출연 캐릭터</h4>
{ep.characters.map((character) =>
<img src={character.image} width="30px"/>
)}
</div>
</li>
)}
</ul>
}
<button onClick={() => setCurrPage(currPage!==1?currPage-1:1)}>prev</button>
<button onClick={() => setCurrPage(currPage+1)}>next</button>
</div>
);
}
export default App;
'STUDY > TIL' 카테고리의 다른 글
Svelte | Svelte프로젝트 시작해보기 (0) | 2021.02.02 |
---|---|
S3와 CloudFront (0) | 2020.12.15 |
GraphQL (2) | 2020.09.25 |
Ionic | 아이오닉 + 리액트 프로젝트 시작하기 (0) | 2020.09.04 |
네이티브 앱, 웹 앱, 하이브리드 앱 (0) | 2020.08.29 |