- 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 일어남)
- 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에 접근 할 수 있게 해준다
- 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 훅을 이용해서 간단하게 데이터 받아와서 뿌리기
- 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;