React+Apollo+GraphQL 쿼리문으로 요청 주고 받기

React+Apollo+GraphQL 쿼리문으로 요청 주고 받기

다연히 Apollo와 React는 클라이언트이기 때문에 서버에 요청을 해서 필요한 작업을 할 수 있어야한다. 서버는 당연히 graphql이므로 쿼리문으로 요청을 해야한다. 

이전에 만들어 놓은 Graphql서버를 통해 요청을 주고 받고 해보겠습니다. 

우선 queries라는 쿼리를 따로 정의 해놓는 자바스크립트 파일을 따로 만듭니다. 

그러기 전에 서버에 어떤 요청을 주고 받을 수 있는지 확인 합시다. 

3가지의 요청이 가능한데 저는 getMovies를 받아 오겠습니다. 

반환값은 movie이고 필요한 파라미터는 최소 rating 이상만 볼 수 있게 정할 수 있는 rating, limit입니다. 

그럼 우선 queries.js에 쿼리를 만들어 보겠습니다. 

이전에 playground에서 만든 것과 똑같이 적어주시면 됩니다. 

그럼 이제 react상에서 실행시켜 보겠습니다. 

react-apollo에서 Query를 호출하고 이 컴포넌트에 실행하고싶은 쿼리를 Query에 등록해주면 됩니다. 

등록 후 함수형태로 파라미터를 error, loading, data로 받을 수 있습니다. error는 이 쿼리문에 에러가 발생했을 때 loading 아직 쿼리의 반환값을 못 받았을 때 data는 쿼리의 결과값입니다. 그래서 이 쿼리문의 결과를 log로 찍어보면  

결과

이 쿼리문과 다르게 직접적으로 파라미터를 전달하여 데이터를 주고받게 하고 싶을 때가 있을 겁니다. 이때를 url에 있는 정보와 함께 가져오며 반환값을 보여드리겠습니다. 

요청 정보 

쿼리문 제작

단순하게 생각하면 일반 함수 제작하듯이 적어주면 됩니다. 

react 부분에서는 받는 함수 인자에 match라는 것을 연결해주면 url의 정보를 받아올 수 있습니다. 이것이 왜 되냐면 Route에서 컴포넌트를 그대로 전달해줘서 그렇습니다. 하지만 다르게 사용할때는 끝에 withRouter라고 export default 객체를 감싸주어야합니다.

withRouter를 통해 history객체에 접근하는 것과 같은 효과를 낼 수 있습니다. 

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md 

그럼 이제부터 리액트 부분에 적용시켜 보겠습니다. 

함수 인자에 match를 적용시키고 이전에 쿼리문에 작성했던 TEST를 받아와서 movie_id를 적용하고 있습니다. 이 들을 로그에 찍어보면 

위에 url에 요청한 정보들이 밑에는 이 쿼리문으로 요청한 결과값을 볼 수 있습니다. 위 object에서 movieId값을 가져오고 싶다면 아래와 같이 작성하면 됩니다. 

인자에서 값을 받을 때 json값을 맞추어서 받아주면 됩니다. json 데이터가 길다면 줄줄이가 되겠지만 짧을 경우에는 유용할 것 같습니다. 

그러므로 이번에는 쿼리문으로 GraphQL서버에 요청해보고 url의 정보와 파라미터를 넣어서 요청하는 것까지 해봤습니다.