Apollo server 연결하기

김부릉·2023년 2월 14일
0
  1. client.js
import { ApolloClient, InMemoryCache } from "@apollo/client";

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


export default client;
  • 백엔드 서버의 uri 와 cache 입력
  • InMemoryCache는 쿼리 결과를 브라우저 캐시에 저장한다. (처음에만 loading 일어남)
  1. index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
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}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ApolloProvider>
  </React.StrictMode>
);
  • ApolloProvider로 App 감싸고 client 프로퍼티
  • ApolloProvider는 프로젝트 안에서는 어디든지 client에 접근 할 수 있게 해준다
  1. Movies.js
import { gql, useApolloClient } from "@apollo/client";
import React, { useEffect, useState } from "react";

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

export default Movies;
  • useApollClient 훅을 이용해서 간단하게 데이터 받아와서 뿌리기
  1. useQuery 사용하기
  • useQuery 는 선언형 코드다
    • 선언형 코드 : 무엇이 일어나는지, 명령적으로 작성된 코드를 추상화 한다. 원하는것을 얻기 위한 코드만 적는다.
    • 명령형 코드 : 어떻게 처리하는지. 절차적. 모든 단계의 코드를 적는다.
import { gql, useQuery } from "@apollo/client";

const ALL_MOVIES = gql`
  query getMovies {
    allMovies {
      title
      id
    }
  }
`;
const Movies = () => {
  const { data, loading, error } = useQuery(ALL_MOVIES);

  if (loading) {
    return <h1> loading...</h1>;
  }

  if (error) {
    return <h1>Could not fetch</h1>;
  }

  return (
    <ul>
      {data.allMovies.map((movie) => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
};

export default Movies;

0개의 댓글