React에서 ApolloGraphQL을 사용한 graphQL 사용 방법

설치

npm install @apollo/client graphql

 

Get started with Apollo Client

 

 

설정

graphQL을 사용하는 서버의 주소를 uri로 설정합니다.

 

client.js

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

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

export default client;

 

ApolloProvider으로 App을 감싼 후 client.js에서 만든 client를 전달해 줍니다. 

 

index.tsx

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

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

 

사용 방법

 

hook 없이 graphQL API를 불러오는 방법

 

useState, useEffect, useApolloClient를 사용해서 정보를 불러와 사용할 수 있습니다.

 

Movies.tsx

import { gql, useApolloClient } from "@apollo/client";
import { useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState([]);
  const client = useApolloClient();
  useEffect(() => {
    client
      .query({
        query: gql`
          {
            allMovies {
              title
              id
            }
          }
        `,
      })
      .then((results) => setMovies(results.data.allMovies));
  }, [client]);
  
  return (
    <ul>
      {movies.map((movie) => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}

 

hook을 이용해서 graphQL API를 불러오는 방법

@apollo/client에서 제공하는 useQuery를 사용해서 API를 불러올 수 있습니다. 위에서의 방식을 편하게 사용하게 제공하는 hook입니다.

 

Movies.tsx

import { gql, useQuery } from '@apollo/client';
import { Link } from 'react-router-dom';

interface MovieInfo {
  title: string;
  id: string;
}

const ALL_MOVIES = gql`
  query getMovies {
    allMovies {
      title
      id
    }
  }
`;

export default function Movies() {
  const { data, loading, error } = useQuery(ALL_MOVIES);

  if (loading) {
    return <div>로딩중...</div>;
  }

  if (error) {
    return <h1>불러올 수 없습니다 :( </h1>;
  }

  return (
    <ul>
      <h1>영화 사이트</h1>
      {data.allMovies.map((movie: MovieInfo) => (
        <li key={movie.id}>
          <Link to={`/movie/${movie.id}`}>{movie.title}</Link>
        </li>
      ))}
    </ul>
  );
}

 

 

인자가 필요한 API의 경우

useQuery에서 variables라는 설정을 통해 변수를 줄 수 있습니다.

 

movie.tsx

import React from 'react';
import { gql, useQuery } from '@apollo/client';
import { useParams } from 'react-router-dom';

interface MovieInfo {
  movie: {
    id: string;
    title: string;
  };
}

const GET_MOVIE = gql`
  query getMovie($movieId: String!) {
    movie(id: $movieId) {
      id
      title
    }
  }
`;

export default function Movie() {
  const { id } = useParams();
  const { data, loading } = useQuery<MovieInfo>(GET_MOVIE, {
    variables: {
      movieId: id,
    },
  });

  if (loading || !data) {
    return <h1>로딩중 ..</h1>;
  }

  return <div>{data.movie.title}</div>;
}

 

Apollo에서 Cache 값 확인하는 방법

Apollo client extension을 설치하게 되면 Apollo에서 관리하는 캐시 메모리를 볼 수 있습니다. 아폴로는 처음에 불러온 데이터를 캐시 메모리에 저장해서 똑같은 데이터를 볼 때 새로 불러오지 않고 캐시 메모리에 저장된 값을 불러와 유저에게 더 빠르게 보여주는 기능을 제공하고 있습니다. 캐시 메모리는 브라우저 메모리에 저장됩니다.

 

https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm/related

Apollo Client Devtools

 

 

Caching in Apollo Client

 

client에서 API 값을 추가하는 경우 ( localOnlyField )

 

local only field는 apollo의 cache에서만 활동하는 필드입니다. 

Apollo는 local only field를 불러오는 API 명세에서 찾지 않습니다.

 

사용하는 곳은 다음과 같습니다. 유저가 다크 모드인지, 사용자의 타임존 (한국인지), 장바구니 명세서, 비디오를 다룬다면 사용자가 원하는 볼륨 크기를 사용자 프로필의 local only field에 저장할 수 있습니다.

 

사용 방법은 graphQL의 값 옆에 @client를 붙이면 됩니다.

const GET_MOVIE = gql`
  query getMovie($movieId: String!) {
    movie(id: $movieId) {
      id
      title
      medium_cover_image
      rating
      isLiked @client
    }
  }
`;

 

Local-only fields in Apollo Client

 

 

Client에서 API값을 추가한 후 Cache값 수정하기

수정하는 방법은 먼저 client.cache를 이용해야 합니다. cache.writeFragment를 사용해서 수정할 수 있습니다.

 

 

1. useApolloClient

const client = useApolloClient(); // client.cache로 사용
const { cache } = useApolloClient(); // cache를 꺼내어 직접 사용
  
  
2. useQuery
  
  const {
    client: { cache },
  } = useQuery<DetailMovieInfo>(GET_MOVIE, {
    variables: {
      movieId: id,
    },
  }); // useQuery에서 client를 사용

 

사용 방법

 

첫 번째 인자로는 수정하고자 하는 값의 아이디가 필요합니다.

 

두 번째 인자로는 캐시 메모리에서 수정하고자 하는 값을 정해줘야 합니다.

 

세 번째 인자로는 수정하고자 하는 값을 입력해줘야 합니다.

 

export default function Movie() {
  const { id } = useParams();
  const {
    data,
    loading,
    client: { cache },
  } = useQuery<DetailMovieInfo>(GET_MOVIE, {
    variables: {
      movieId: id,
    },
  });

  const onClick = () => {
    cache.writeFragment({
      id: `Movie:${id}`,
      fragment: gql`
        fragment MovieFragment on Movie {
          isLiked
        }
      `,
      data: {
        isLiked: !data?.movie.isLiked,
      },
    });
  };

 

 

Fragments

 

Reading and writing data to the cache

 

 

학습해 보며 느낀 점

원하는 쿼리 값들을 클라이언트 측에서 조합하여 사용할 수 있다는 점이 매력적이었습니다.

 

그리고 캐시 메모리를 이용해서 다양한 기능들을 제공할 수 있을 것 같은데 세션 스토리지를 더 편하게 사용하게끔 제공하는 옵션이라고 생각되었습니다.

 

grpahQL을 이용해서 개발해 본 적이 없기 때문에 한번 이용해보고 싶다는 생각이 들었습니다. 

 

그리고 주간에 100만 다운로드, Apollo 익스텐션은 40만 다운로드여서 꽤 안정적으로 운영되고 사용하는 라이브러리라고 생각이 들었습니다.

 

 

 

Apollo Server 사용해 보기

 

[23년 업데이트] graphQL에 관하여 // graphQL 이용해보기