본 글에서는 Nodejs 에서 간단히 GrahpQL 서버에서 데이터를 fetch 하는 클라이언트 작성 방법을 소개한다.

필요 모듈

  "devDependencies": {
    "ts-node": "^8.1.0",        
    "typescript": "^3.4.5"      
  },
  "dependencies": {
    "apollo-boost": "^0.3.1",   
    "graphql": "^14.2.1",
    "node-fetch": "^2.3.0"
  }

1. ts-node
   • ts 를 컴파일 없이 바로 실행
2. type-script
   • 본 예제에서는 단순히 import 구문을 간단히 사용하기 위함
3. apollo-boost
   • GraphQL 클라이언트 모듈
4. node-fetch
   • ApolloClient 가 사용할 http 요청 모듈

소스

import ApolloClient, {gql} from "apollo-boost";
import fetch from 'node-fetch'

const client = new ApolloClient({
    uri: "https://48p1r2roz4.sse.codesandbox.io",
    fetch,
});

client.query({
  query: gql`
      {
          rates(currency: "USD") {
              currency
          }
      }
  `
}).then(result => console.log(result));

1. 예제를 테스트하기 전에 https://48p1r2roz4.sse.codesandbox.io 를 클릭하여 서버 인스턴스를 시작해 두어야 한다
2. ApolloClient 는 http 요청을 날리기 위해 내부적으로 전역스코프에서 fetch 를 찾는다. Nodejs 환경에서는 기본으로 fetch 를 제공하지 않기 때문에 node-fetch 모듈을 객체생성시 전달해야 한다.
3. gql 은 작성된 grahpql 쿼리를 파싱하고 ApolloClient 가 처리할 수 있는 객체로 반환한다.
4. 본 예제에서 ts-node 와 typescript 는 바벨설정 없이 import 구문을 간단히 사용하기 위해 사용되었다.

mutation 예제

client.mutate({
    mutation : gql`
        mutation {
          signUp(email: "user01@gmail.com", password: "Dev1@#$%^&"){
              email
              roles
          }
        }
  `
}).then(result => console.log(result));

Ref.

https://www.apollographql.com/docs/react/essentials/get-started

GitHub

https://github.com/min9nim/toy-apollo-client