Apollo with React

설치

• npm install @apollo/client graphql
• apollo.js

import { InMemoryCache, ApolloClient } from "@apollo/client";

const client = new ApolloClient({
  uri: "http://localhost:4000",
  cache: new InMemoryCache(),
});

export default client;

• index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { ApolloProvider } from "@apollo/client";
import client from "./apollo";

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

data받아오기

import { gql, useQuery } from "@apollo/client";

• 서버로 보낼 query 작성

const GET_MOVIES = gql`
  {
    movies {
      id
      medium_cover_image
    }
  }
`;

• 해당 query를 useQuery를 통해 서버로 보낸다
  • loading
    • data를 받아오기 전이면 loading이 true data를 받아오면 false이다
  • error
    • 말 그대로 error가 담긴다
  • data
    • 말 그대로 query에 작성한 data가 담긴다.

const Home = () => {
  const { loading, error, data } = useQuery(GET_MOVIES);
  console.log(data);
  return (
    <Container>
      <Header>
        <Title>Apollo 2020</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>
  );
};

Movie Detail

• query에 변수를 넣는법
• query 옆에 getMovie부분은 아무이름이나 써도 된다.
• 변수 부분을 $id로 써주고 타입을 명시해준다.

const GET_MOVIE = gql`
  query getMovie($id: Int!) { 
    movie(id: $id) {
      id
      title
      medium_cover_image
      description_intro
    }
  }
`;

• useQuery로 data가져오는 법
  • useParams을 통해 /:id부분을 가져올 수 있음.
  • useQuery 두번째 인자로 객체를 넣을 수 있다. 해당 객체내에 variables의 값으로 id를 넣어주면된다.

const Detail = () => {
  const { id } = useParams();
  const { loading, error, data } = useQuery(GET_MOVIE, {
    variables: { id: +id },
  });
  console.log(data);
  return (
    <div>
      {loading && <Loading>Loading...</Loading>}
      {!loading && data && <h1>{data.movie.title}</h1>}
    </div>
  );
};

client에서 query넣기

const client = new ApolloClient({
  uri: "http://localhost:4000",
  cache: new InMemoryCache(),
  resolvers: {
    Movie: { //Query에 있는 값이어야한다 
      isLiked: () => false, //client에서 설정해준 Query에는 없다 
    },
  },
});

• 가져오는법

  • @client
    - client에서 설정해 준 값이니깐 @client를 적어줘야한다.

    const GET_MOVIES = gql`
      {
        movies {
          id
          medium_cover_image
          isLiked @client
        }
      }
    `;