소개

Node.js에서 GraphQL을 사용하는 프로그램을 작성할 기회가 있었지만 프론트가 아닌 서버 측에서 사용하는 방법을 조사하는 데 약간의 시간이 걸렸기 때문에 기사로 둡니다.

AppoloClient란?

GraphQL 서버와 통신하기 위한 라이브러리입니다.
이 기사는 GraphQL 쿼리를 쉽게 실행하는 데 중점을두고 있기 때문에 자세히 설명하지는 않지만 다기능 라이브러리에서 Loading 및 Error와 같은 통신 상태를 자동으로 처리하거나 검색 결과 를 캐시로 유지할 수도 있습니다.

실천!

실제로 Node.js 코드에서 GraphQL을 실행합시다.

사전 준비

※Nodejs는 인스톨이 끝난 것으로 합니다.
다음 절차에서는 동작 확인 샘플을 위해 GitHub GraphQL API를 사용합니다.
(GitHub의 리포지토리나 Issue의 정보를 GraphQL로 취득하는 API)
사용하려면 토큰이 필요하므로 사전에 다음 페이지에서 Generate new token 버튼을 눌러 토큰을 발행하십시오.
htps : // 기주 b. 코 m/세친 gs/토켄 s/

또, 사용하는 라이브러리는 소스의 실행전에 사전에 이하의 커멘드로 인스톨 해 두어 주세요.

yarn add node-fetch graphql @apollo/client 

소스 코드

※정수 token 의 설정 내용은 사전 준비로 작성한 토큰으로 옮겨 주세요

"use strict";

global.fetch = require("node-fetch");
const { ApolloClient, InMemoryCache, gql } = require("@apollo/client/core");
const token = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

// 自分のリポジトリを取得するクエリ
const searchQuery = gql`
  query repositories($number_of_repos: Int!) {
    viewer {
      repositories(last: $number_of_repos) {
        nodes {
          name
        }
      }
    }
  }
`;

// https://github.com/octocat/Hello-World/issues/349　のイシューにリアクションを付けるクエリ
const mutationQuery = gql`
  mutation AddReactionToIssue {
    addReaction(
      input: { subjectId: "MDU6SXNzdWUyMzEzOTE1NTE=", content: HOORAY }
    ) {
      reaction {
        content
      }
      subject {
        id
      }
    }
  }
`;

// GraphQL クライアントを生成
const apolloClient = new ApolloClient({
  uri: "https://api.github.com/graphql",
  headers: { authorization: `Bearer ${token}` },
  cache: new InMemoryCache(),
});

// searchQueryを実行する関数
async function search() {
  const searchResult = await apolloClient
    .query({ query: searchQuery, variables: { number_of_repos: 3 } }) //取得するリポジトリの数を設定
    .then((result) => {
      return result;
    })
    .catch((error) => {
      console.log(error);
    });
  console.log(JSON.stringify(searchResult, undefined, 2));
}

// mutationQueryを実行する関数
async function mutation() {
  const mutationResult = await apolloClient
    .mutate({ mutation: mutationQuery })
    .then((result) => {
      return result;
    })
    .catch((error) => {
      console.log(error);
    });
  console.log(JSON.stringify(mutationResult, undefined, 2));
}

search();
mutation();

실행 결과 부분 발췌

{
  "data": {
    "viewer": {
      "__typename": "User",
      "repositories": {
        "__typename": "RepositoryConnection",
        "nodes": [
          {
            "__typename": "Repository",
            "name": "Repository1"
          },
          {
            "__typename": "Repository",
            "name": "Repository2"
          },
          {
            "__typename": "Repository",
            "name": "Repository3"
          }
        ]
      }
    }
  }
}
{
  "data": {
    "addReaction": {
      "reaction": {
        "content": "HOORAY",
        "__typename": "Reaction"
      },
      "subject": {
        "id": "MDU6SXNzdWUyMzEzOTE1NTE=",
        "__typename": "Issue"
      },
      "__typename": "AddReactionPayload"
    }
  }
}

첫 번째 data가 query에서 얻은 리포지토리의 정보입니다.
두 번째 data는 mutation에서 수행한 Issue에 대한 반응의 결과입니다.
소스 실행 후 아래의 Issue를 확인하면 계정에서 반응이 발생했는지 확인할 수 있습니다.
※GitHub 공식이 작성한 리액션 테스트용의 Issue입니다.
htps : // 기주 b. 이 m / 오 c 또는 t / 헤이를 rld / 모두 s / 349

　
　
　
이상입니다.
비밀 키를 프런트에 두고 싶지 않은 이유로 서버 측에서 GraphQL 쿼리를 실행하려면 꼭 참조하십시오.