Home GraphQL-Apollo-Client
Post
Cancel

GraphQL-Apollo-Client

공식 문서

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 },
  });
    
 // ...
    
}


아폴로 클라이언트는 쿼리의 결과를 자동으로 캐싱한다. 그래서 똑같은 쿼리를 보낸 경우 빠르게 반응할 수 있다.

pollingrefetch를 통해 캐시된 데이터를 최신 상태로 유지할 수 있다.

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)

공식 문서

useMutationuseLazyQuery와 유사하게 쿼리 함수를 반환한다.

일반적으로 추가, 수정, 삭제는 사용자의 이벤트에 대한 응답으로 실행되는 경우가 많기 때문에 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
  ],
});


This post is licensed under CC BY 4.0 by the author.