TIL: GraphQL, Apollo Client (2) ApolloProvider - 220622

GraphQL Apollo

// 이전에는 client에서 작동하는 것을 봤음
import { ApolloClient, InMemoryCache } from "@apollo/client";
import { gql } from "@apollo/client";

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

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

export default client;

Client에 컴포넌트 연결

// src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import client from "./client"; // 작성한 클라이언트
import { ApolloProvider } from "@apollo/client";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}> // 내부의 컴포넌트 어디든 client 전달 가능
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

// src/Movies.jsx

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

export default function Movies() {
  const client = useApolloClient(); // Provider를 통해 전달받은 client를 불러오는 hook
  return <div>list of movies</div>;
}

Provider는 어플리케이션 안의 모두가 client에 접근할 수 있도록 한다