반응형 개발/GraphQL , Apollo19 GraphQL로 restAPI 사용하기 기존 RestAPI를 GraphQL로 감싸주었다. db.js에서는 url을 fetch한 리턴값을 getMovies에 할당했다. //db.js import fetch from "node-fetch"; const API_URL = "https://yts.am/api/v2/list_movies.json?"; export const getMovies = (limit, rating) => { let REQUEST_URL = API_URL; if (limit > 0) { REQUEST_URL += `limit=${limit}`; } if (rating > 0) { REQUEST_URL += `&minimum_rating=${rating}`; } return fetch(`${REQUEST_URL}`) .then((r.. 2022. 1. 23. Apollo 공식문서 첫부분 https://www.apollographql.com/docs/react/get-started/ 공식문서를 그대로 따라하였다. npm install, npx-create-react-app 같은 부분은 설명하지 않는다. 튜토리얼은 공식문서에 잘 설명되어 있기 때문에, 튜토리얼보다는 튜토리얼을 나름대로 정리했다. 공식문서를 따라한 CodeSandBox InMemoryCache : 아폴로가 캐시를 이용할 수 있게 해주는 라이브러리 ApolloProvider : 모든 컴포넌트에서 아폴로에 접근하도록 해준다. useQuery : GraphQL 데이터를 UI와 공유하도록 도와주는 리액트 훅 useQuery를 통해 응답의 상태를 추적 컴포넌트가 렌더될 때 useQuery는 Apollo Client에서 object를 .. 2022. 1. 22. Apollo Client Apollo Client Apollo Client는 GraphQL을 편하게 사용하도록 도와주는 클라이언트 라이브러리이다. 또한 전역 상태 관리 라이브러리의 역할도 한다. GraphQl 쿼리를 작성하기만 하면 Apollo Client가 데이터를 요청하고 캐싱하고 UI까지 업데이트해준다. 응답의 상태를 추적(load, error, value) Apollo Client는 로딩, 오류 상태를 추적하여 처음부터 끝까지 요청주기를 포함한다. 이는 내가 프로젝트때 사용했던 리코일의 selector함수를 이용한 비동기처리와 닮아있다. useQuery 훅을 통해 Apollo 앱에서 쿼리를 실행, useQuery에 GraphQL 쿼리 문자열을 전달하여 호출한다. 캐시를 이용한 네트워크 요청 생략 Apollo Client는.. 2022. 1. 21. GraphQL Mutation은 CRUD중 CUD이다. 잘못된 내용이 있으면 언제든 알려주세요! Query가 get요청이었다면, Mutation은 post,put,patch,delete이다. type에 아래 사진과 같이 Mutation의 타입을 설정해주었다. resolver에도 Mutation을 할당해줌. addMovie는 movie 리스트에 데이터를 추가하는 함수이다. //addMovie export const addMovie = (name, score) => { const newMovie = { id: `${movies.length + 1}`, name, score, }; movies.push(newMovie); return newMovie; }; graphql-yoga 로컬호스트4000에서 다음과 같이 mutation 할 수 있다. 정말로 추가가 되었는.. 2022. 1. 21. 이전 1 2 3 4 5 다음 반응형
