Apollo

Apollo

• query를 Axios의 fetch와 함께 POST request 로 보내야함

• react Apollo가 뭔가를 얻으면 그걸 저장해둠(다시 request를 기다릴 필요가 없음) -cache

<Home.js>

import React from "react";
import {gql} from "apollo-boost";
import {useQuery} from "@apollo/react-hooks";
import styled from "styled-components";
import Movie from "../components/Movie";

const GET_MOVIES=gql` # localhost:4000에서 movies에 관한 query 가져옴 
{
    movies{
        id
        medium_cover_image
    }
}
`;

export default () => {
  const { loading, data } = useQuery(GET_MOVIES);//useQuery가 없을 때 error얻음 
  return (
    <Container>
      <Header>
        <Title>Apollo 2021</Title>
        <Subtitle>I love GraphQL</Subtitle>
      </Header>
      {loading && <Loading>Loading...</Loading>}
      {!loading &&
        data.movies &&
        data.movies.map(m => <Movie key={m.id} id={m.id} />)} 
    </Container>
  ); //loading false이면 Movie.js에 따라 id출력
};

<Detail.js>

import React from "react";
import {useParams} from "react-router-dom";
import {useQuery} from "@apollo/react-hooks";
import {gql} from "apollo-boost";
//해당 id클릭하면 detail 페이지로 넘어가는 코드 

const GET_MOVIE=gql` #query에 variable이 있다면 그것을 적어줘야 함
    query getMovie($id: Int!){# Apollo만을 위한 것 변수 type 검사
        movie(id:$id){ # 이 query는 server로 전달
        title
        medium_cover_image
        language
        rating
        description_intro
        }
    } 
`;

export default() => {
    let {id}=useParams();//parameter를 얻을 수 있음 
    const { loading, data } = useQuery(GET_MOVIE, {variables: { id:parseInt(id)}});

    if(loading){
        return "loading"
    }
    if(data&&data.movie){
        return data.movie.title;
    }

    return "Detail";
};