Apollo Client는 GraphQL API를 클라이언트 단에서 호출하기 위해서 사용한다.
( ReduxRTKQuery와 사용법이 유사하다!)
1. 환경 설정
1
2
# 패키지 설치
npm install @apollo/client graphql
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// App.js
// apolloClient 모듈을 import한다.
import { ApolloProvider } from '@apollo/client';
import { ApolloClient, InMemoryCache } from '@apollo/client'
// GraphQL 서버로와 정보를 주고 받을 ApolloClient 객체를 만든다.
const client = new ApolloClient({
uri: 'http://localhost:4000', // 서버 주소
cache: new InMemoryCache() // InMemoryCache를 통한 캐시 관리
});
// ...
// 내부 요소들을 ApolloProvider로 감싸준다.
return (
<div className="App">
<ApolloProvider client={client}>
<header className="App-header">
<h1>Company Management</h1>
<nav>
<ul>
{NavMenus()}
</ul>
</nav>
</header>
<main>
{mainComp[menu]}
</main>
</ApolloProvider>
</div>
);
2. GraphQL API 호출
1) useQuery (Read)
useQuery
는 기본적으로 loading, error, data를 반환한다.
- loading: 로딩 중이면 true, 아니면 false를 반환한다.
- data: 요청에 의해 반환되는 데이터
- error: error 여부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { gql, useQuery } from '@apollo/client';
// 선언
const GET_DOGS = gql`
query GetDogs($id :Int) {
dogs {
id
breed
}
}
`
// 호출
function GetDog() {
const { loading, error, data } = useQuery(GET_DOGS, {
variables: { breed },
});
// ...
}
아폴로 클라이언트는 쿼리의 결과를 자동으로 캐싱한다. 그래서 똑같은 쿼리를 보낸 경우 빠르게 반응할 수 있다.
polling 과 refetch를 통해 캐시된 데이터를 최신 상태로 유지할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 1. polling: 정한 시간마다 자동으로 데이터를 갱신
const { loading, error, data } = useQuery(GET_DOGS, {
variables: { breed },
pollInterval: 500,
});
// 2. refetch: 유저의 특정 행동 후에 다시 query를 요청하는 함수를 실행 (데이터 갱신)
const { loading, error, data, refetch } = useQuery(GET_DOGS, {
variables: { breed },
});
// ...
return (
<button onClick={() => refetch({breed: "new_dog_breed"})}> click </button>
);
};
2) useLazyQuery
useLazyQuery
는 사용자의 이벤트에 대한 응답으로 쿼리를 요청하는데 적합하다.
useQuery
의 경우 호출하면 연결된 쿼리를 즉시 실행하지만,
useLazyQuery
는 즉시 실행하지 않고 쿼리 함수를 반환하여 특정 이벤트 후에 쿼리를 요청하도록 할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useLazyQuery } from '@apollo/client';
function GetDog() {
// 호출했지만, GET_DOGS가 바로 실행되지 않는다.
// 쿼리는 getDog()통해 실행된다.
const [getDog, { loading, error, data }] = useLazyQuery(GET_DOGS);
// ...
return (
<button onClick={() => getDog({variables: { breed: "new_dog_breed"}})}> click </button>
);
};
3) useMutation (Create, Update, Delete)
useMutation
은 useLazyQuery
와 유사하게 쿼리 함수를 반환한다.
일반적으로 추가, 수정, 삭제는 사용자의 이벤트에 대한 응답으로 실행되는 경우가 많기 때문에 useQuery
와 같이 호출시 즉시 실행하지 않는다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { gql, useMutation } from '@apollo/client';
// 선언
const ADD_TODO = gql`
mutation AddTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
// 호출, 실행
function AddTodo() {
const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);
// form을 제출하면, mutate 함수가 실행된다.
return (
<form onSubmit={event => {
event.prevendDefault();
addTodo({variables: {type: input.value}});
}};
>
//...
</form>
)
}
만약, mutation 요청을 보낸 후에 데이터를 최신 상태로 유지하고 싶다면 refetchQueries
옵션을 사용하면 된다.
1
2
3
4
5
6
const [addTodo, { data, loading, error }] = useMutation(ADD_TODO, {
refetchQueries: [
{query: GET_POST}, // DocumentNode object parsed with gql
'GetComments' // Query name
],
});