GraphQL - GraphQL Client 시작하기

GraphQL

 

 

✅ GraphQL Client를 생성해 GraphQL Server와 연결하기

---

일단 미리 만들어둔 GraphQL Server를 실행시킨다.

 

Apollo Client와 GraphQL 설치

(서버 만들 때는 apollo-server를 설치했었음)

npm i apollo/client graphql

 

<client.js>

밑 코드는 client가 잘 동작하는지 확인하기 위해 테스트 용도

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

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

client
  .query({
    query: gql`
      {
        allMovies {
          title
        }
      }
    `,
  })
  .then((data) => console.log(data));

export default client;

 

그리고 client를 index.js에서 import만 시켜도 GraphQL Server에서 data를 가져온다.

 

<ApolloProvider>, useApolloClient()

---

어플리케이션의 모든 곳에서 client에 접근할 수 있게 ApolloProvider를 사용해준다.

import client from "./client";
import { ApolloProvider } from "@apollo/client/react";

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

 

그리고 client를 사용할 곳에서 useApolloClient()를 사용하면 된다.

  const client = useApolloClient();
  useEffect(() => {
    client
      .query({
        query: gql`
          {
            allMovies {
              title
              id
            }
          }
        `,
      })
      .then((result) => setMovies(result.data.allMovies));
  }, [client]);

 

(GraphQL로 받아온 데이터는 Apollo 클라이언트가 json() 변환을 대신 해주어서 REST API와 같이 json()으로 수동 변환 해줄 필요가 없다는 장점이 있다.)

 

 

✅ useQuery

---

React Query와 비슷하게 Apollo Client에도 useQuery hook이 있다.

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

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

export default function Movie() {
  const { id } = useParams();
  const { data, loading } = useQuery(GET_MOVIE, {
    variables: {
      movieId: id,
    },
  });
  console.log(data);
  if (loading) {
    return <h1>Fetching Movie...</h1>;
  }
  return <div>{data.movie.title}</div>;
}

 

얘도 cache 됨.

 

 

✅ Apollo  Client Devtools

---

 

여러 정보 확인 가능

 

 

✅ Local Only Fields

---

Apollo 클라이언트 쿼리에는 GraphQL 서버의 스키마에 정의되지 않은 로컬 전용 필드가 포함될 수 있습니다. @client 지시문은 isLiked가 로컬 전용 필드임을 Apollo Client에 알립니다.

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

 

import { HttpLink } from "@apollo/client";
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { LocalState } from "@apollo/client/local-state";

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

export default client;

 

✅ readFragment & writeFragment

---

readFragment를 사용하여 쿼리없이 cache에서 random-access(처음부터 순서대로 탐색하지 않고, 원하는 위치를 바로 접근한다)로 데이터에 접근할 수 있다.

 

writeFragment는 같은 방식으로 cache의 data를 수정할 수 있다.
(writeFragment를 사용하여 캐시된 데이터에 대한 변경 사항은 GraphQL 서버에 푸시되지 않습니다. 환경을 다시 로드하면 이러한 변경 사항이 사라집니다.)

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

 

현재 코드에서는 useQuery안의 client내에서 가져온 cache로 writeFragment를 사용하였지만, client.writeFragment로도 사용 가능하다.