개발/graphQL 썸네일형 리스트형 리액트로 GraphQL 써보기 공부한 것을 정리해본 글입니다. GraphQL in React! GraphQL은 URL로 요청을 보내서 정해진 데이터를 받아오는 rest api와는 달리 원하는 데이터를 찍어서 가져오는 것이 가능하다. GraphQL은 메시지 바디에 적절한 쿼리를 담아서 post 요청을 날려서 원하는 값을 받아오게된다. 이를 리액트에서 사용하는 것을 생각해보면 fetch나 axios를 써서 메시지 바디에 위에 있는 형식대로 담아서 쓰면 되기는 하겠지만 번거로운 점이 많다. 편리한 라이브러리를 두고 굳이 저렇게 할 이유는 없다. Apollo 라이브러리 이전 실습때 insomnia에서 post 요청으로 graphql에서 데이터를 가져왔던 것처럼 fetch나 axios를 사용해서 가져올 수는 있을 것이다. 하지만 react의 .. 더보기 GraphQL로 rest api 감싸기 GraphQL을 사용해서 REST api를 감싸는 것도 가능하다. REST api의 결과 데이터를 GraphQL이 한번 더 핸들링 해주는 것이다. HOW? 방법은 간단하다. 이전 시간에 실습해본 내용은 GraphQL 서버로 데이터를 요청하면 응답값으로 단순히 코드상의 데이터를 전달했다. export let memberList = [ ..멤버 배열 ] export const getMembers = () => memberList; 그렇다면 반환하는 데이터를 fetch나 axios를 사용해서 rest api의 데이터를 가져와 반환하면 된다. 실습해 사용한 무료 rest api 사이트 https://gorest.co.in/ Online REST API for Testing and Prototyping | GO .. 더보기 GraphQL이란? REST API와는 다른 GraphQL REST API에서는 url로 요청을 보내서 서버로부터 요청에 맞는 적절한 응답 데이터를 받아온다. 이는 서버가 응답해주기로 정해놓은 틀 내에서 프론트가 데이터를 전달 받을 수 있다는 것이다. 가령 예를 들어 GET /members GET /memos 라는 rest api가 있을때 프론트 측에서 저 url로 요청을 보내면 서버가 정해서 반환해주는 데이터를 받게된다. 받게 되는 데이터가 어떤 구조인지는 console.log에 찍어서 확인해보거나 브라우저를 통해 url로 접속해서 json 데이터를 직접 확인하거나 일 것이다. 반면 GraphQL 에서는 url이 존재하지 않는다. rest api에는 있는 uri 체계도 없고 /members 이런 url도 없고 그저 하나의.. 더보기 이전 1 다음
