NuxtでgraphQLを用いてgithubからデータを取得してみた

Nuxt（v2.12.2）で作成したプロジェクトでGitHub GraphQL APIを叩いて自分のgithubアカウントが作成したリポジトリの情報を取得してみました。

#できること

• @nuxt/apolloでgraphqlでgithubのアカウント情報を取得

#1.プロジェクトを作成
本件ではNuxt-v2.12.2を使用した。

terminal

npx create-nuxt-app プロジェクト名

nuxtプロジェクトを作成し初期設定をする。(省略)

#2.モジュールをインストール

• @nuxtjs/apollo

terminal

yarn add @nuxtjs/apollo

yarn devしてみるとエラー。
使用しているnuxtのバージョンによってはcore-jsの対応するバージョンをインストールしないといけないみたい。

• core.js

yarn add core-js@2.6.11

#3.nuxt.config.jsの設定
ファイル内に以下を追記

nuxt.config.js

modules: ["@nuxtjs/apollo"],
  apollo: {
    clientConfigs: {
      default: "~/plugins/apollo-auth.js"
    }
  }

#4.pluginsの設定
アクセストークンの取得の仕方はページ下を参照。

plugins/apollo-auth.js

export default function(context) {
  const accessToken = アクセストークン;

  return {
    httpEndpoint: "https://api.github.com/graphql",
    getAuth: () => `Bearer ${accessToken}`
  };
}

#5.queryを作成
apollo/queries/getRepositories.graphqlを作成

apollo/queries/getRepositories.graphql

{
  viewer {
    login
    repositories(first: 5) {
      edges {
        node {
          name
          id
        }
      }
    }
  }
}

#6.データを取得して出力

pages/index.vue

<template>
  <div>
    <h3>Github repositories</h3>
    <ul>
      <li v-for="edge in viewer.repositories.edges" :key="edge.node.id">
        {{ edge.node.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import getRepositories from "~/apollo/queries/getRepositories.graphql";

export default {
  data() {
    return {
      viewer: []
    };
  },

  apollo: {
    viewer: {
      query: getRepositories
    }
  }
};
</script>

#参考
##githubAPIのアクセストークン取得の仕方

https://github.com/settings/tokens
↓
左のリストのPersonal sccess tokens
↓
右上のGenerate new token
↓
キーの名前を入力
↓
repoにチェック
↓
Generate token

アクセストークンは一度しか表示されないのでメモしておく。