Phot_o_matic Programming

이전 글의 코드로 인하여, Home 페이지 접속 시 필요한 정보들을 불러오게 되었다. Home에서 렌더된 각 영화를 클릭하면, 해당하는 영화의 id로써 세부 정보를 볼 수 있게 Detail로 이동시킬 것이다. Detail로 이동하였다 뒤로가기를 하여도 Home 페이지가 새롭게 정보를 요청하진 않는다. Apollo가 처음에 응답받은 데이터를 cache로 저장하고 있기 때문이다. 저장 중인 데이터는 Apollo Dev Tool의 cache 항목으로 가면 볼 수 있다. Detail.js params와 함께 routing import React from 'react'; import { Query } from 'react-apollo'; //render prop을 사용하여 컴포넌트를 만드는 경우에 //컴포넌트가 ..

Programming/GraphQL 2019. 10. 2. 23:53

이제까지 만들어놓은 GraphQL API를 사용하는 Apollo 클라이언를 만들어본다. react를 사용하도록 한다. 프로젝트를 시작하기에 앞서,필요한 모듈을 설치해준다. yarn add react-router-dom apollo-boost react-apollo graphql-tag graphql react-helmㄷt --save Apollo 이 중 Apollo Boost는 GraphQL 클라이언트를 가지기 위한 모든 것을 세팅해준다. GraphQL-Apollo 클라이언트의 cli 정도로 생각해주자. redux처럼 Apollo도 Provider를 가지고 있다. (container, present 등) client 생성/선언 Apollo Boost를 이용하여 client를 쉽게 형성하는 파일의 코드를 ..

Programming/GraphQL 2019. 10. 2. 21:06

지난 글에서 작성한 YTS API 사용에 이어, 좀 더 세분화된 기능을 추가해본다. db.js 기존에 사용하던 fetch는 사용하기 불편하여 axios를 사용해본다. axios는 request 시 endpoint 지정을 params라는 명칭으로 정의하여 요청할 수 있다. import axios from "axios"; const BASE_URL = "https://yts.lt/api/v2/"; const LIST_MOVIES_URL = `${BASE_URL}list_movies.json`; const MOVIE_DETAILS_URL = `${BASE_URL}movie_details.json`; const MOVIE_SUGGESTIONS_URL = `${BASE_URL}movie_suggestions.js..

Programming/GraphQL 2019. 10. 1. 21:38