GraphQL - Apollo react 앱 만들기 (2)

이전 글의 코드로 인하여,
Home 페이지 접속 시 필요한 정보들을 불러오게 되었다.
Home에서 렌더된 각 영화를 클릭하면,
해당하는 영화의 id로써 세부 정보를 볼 수 있게 Detail로 이동시킬 것이다.
Detail로 이동하였다 뒤로가기를 하여도 Home 페이지가 새롭게 정보를 요청하진 않는다.
Apollo가 처음에 응답받은 데이터를 cache로 저장하고 있기 때문이다.
저장 중인 데이터는 Apollo Dev Tool의 cache 항목으로 가면 볼 수 있다.

Detail.js

1. params와 함께 routing

   import React from 'react';
   import { Query } from 'react-apollo';
   //render prop을 사용하여 컴포넌트를 만드는 경우에 
   //컴포넌트가 인자로써 prop을 받게 하자
   
   const Detail = ({
   match: {
   params: {movieId}
   }
   }) => {
   console.log(movieId)
   return
   
   Detail
   
   }
   
   export default Detail;
   
   

2. variable을 포함하여 보내기
   GraphQL에서 query에 parameter를 넣어 요청한 것을 떠올려보자.
   Apollo 클라이언트에서는 다른 방법으로 query에 variable을 추가하여 요청한다.

queries.js

import gql from 'graphql-tag';

export const MOVIE_DETAILS = gql`
    //Apollo 클라이언트 코드에서 사용할 query명을 선언해준다
    //사용할 query의 parameter variable의 명칭과 타입을 정의한다.
    //그 내부에 실제로 GraphQL에 요청할 query 명칭을 넣어준다.
    query getMovieDetails($movieId: Int!) {
        movie(id: $movieId) {
            medium_cover_image
            title
            rating
            description_intro
            language
            genres
        }
        suggestions(id: $movieId) {
            id
            title
            rating
            medium_cover_image
        }
    }
`;

Detail.js
queries에 추가한 getMovieDeatils 클라이언트 query를 사용하려면 어떻게 해야할까?
Query 컴포넌트의 props 중 하나인 variables의 이름으로 추가하면 된다.

import React from "react";
import { MOVIE_DETAILS } from "./queries";
import Movie from "./Movie";
import {Query} from 'react-apollo';
const Detail = ({
  match: {
    params: { movieId}
  }
}) => {({loading, error, data}) => {
  if(loading) return "loading";
  if(error) return "error";
  return (

      {data.movie.title}
      {data.movie.medium_cover_image}
      {data.movie.rating}

  )
}}
export default Detail;