[Web] 11편 - React Native에서 GraphQL Axios로 받아오기

앞선 포스트에서 @Apollo/Client 에서 지원하는 React Hook을 이용하는 방법을 공부했었다.

하지만 실제 프로젝트에 쓰려고 보니, GraphQL을 가져오는 과정이 React Component 안쪽이 아닌 곳에서는 useQuery, useMutation과 같은 Hook을 사용할 수 없다는 점이었다. (이 사실을 모르고, 거의 이틀을 억까 당하며 고생했다.)

 

위 사실을 깨닫고 나서는 새로운 방법 axios 라이브러리를 이용해서 직접 API 쿼리를 날리는 방법을 사용했다.

이렇게하면 어디서나 함수호출의 형태로 response를 받아오는것이 가능해졌다.

 

본인은 백엔드를 개발하지만, 결국 프론트 개발자에게 맞춰서 API 호출 규약을 짜서, 넘겨줘야 했기에 프론트 언어 (혹은 라이브러리)에 대한 이해도 같이 필요함을 절실히 느꼈던 일이었다.

---

먼저 함수를 만들어준다. axios를 사용하고, async&await 문법으로 비동기 처리를 해준다.(API를 읽어오는데 시간이 필요하니까)

총 4개의 인자를 받는데 각각

endpoint : graphql API가 연결되는 주소

query : graphql 쿼리문

token : Authorization을 위한 토큰 입력 (GraphQL 서버 자체적으로 인가된 사용자만 API 요청을 할 수 있도록 제한하고 있다)

variables : 쿼리문에 연결되는 변수(입력값)

// /utils/GetData.js
const axios = require('axios');

const GetQuery = async (endpoint, query, token, variables) => {
  try {
    const data = await axios.post(
      endpoint,
      {
        query: query,
        variables: variables,
      },
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: token,
        },
      },
    );
    return data.status === 200 ? data.data : 'error';
  } catch (error) {
    return error;
  }
};

export default GetQuery;

이후 내가 쿼리를 요청할 곳에서(어디든 상관없다, 컴포넌트 안밖에서 가능함) 아래와 같이 호출해준다. 마찬가지로 비동기식으로 처리하고, 변수 값들을 맞춰 넣어준다.

import GetQuery from '../utils/GetData';

...

  const test_endpoint = 'http://localhost:8000/graphql';
  const test_query = `쿼리문`;
  const test_token = 'Bearer 유저 토큰값';
  const test_variables = {
    쿼리에 입력될 변수,
  };

  (async () => {
    const response = await GetQuery(
      test_endpoint,
      test_query,
      test_token,
      test_variables,
    );
    alert(JSON.stringify(response));
  })();