[GraphQL] 2. Apollo client 생성

노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 
강의를 보고 정리한 글입니다.

 

Client 생성

- url는 GraphQL 서버 주소를 기입하면 된다.

 

// src/apollo.ts

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

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

export default client;

 

쿼리 작성

// src/apollo.ts

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

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

 

작동 확인

- import만 해도 작동 여부를 확인할 수 있다.

 

// index.tsx

import client from './apollo.ts';

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

Apollo Client와 React 컴포넌트 연결 

// index.tsx

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

<ApolloProvider client={client}>
    <App />
</ApolloProvider>

 

Client 접근

- ApolloProvider에 의해 전역에서 client 접근이 가능하다.

 

import { useApolloClient } from '@apollo/client';

function Movies() {
    const client = useApolloClient();
    return <div>This is a list of movies</div>;
}