我在使用Nuxt（v2.12.2）创建的项目中调用了GitHub GraphQL API，尝试获取我自己的GitHub帐户创建的存储库信息。

可以做的事情 zuò de

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

1. 创建项目 (CJZ)

在本案中，我使用了Nuxt-v2.12.2。

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

创建一个 Nuxt 项目并进行初始设置。（省略）

2. 安装模块。

@nuxtjs/apollo

yarn add @nuxtjs/apollo

尝试执行 yarn dev 时出现错误。
根据所使用的 Nuxt 版本，似乎需要安装相应的 core-js 版本。

core.js

yarn add core-js@2.6.11

3. nuxt.config.js 的配置

在文件中添加以下内容

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

4. 插件的配置

获取访问令牌的方法，请参阅页面底部。

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

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

创建一个查询

创建apollo/queries/getRepositories.graphql

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

获取数据并输出。

<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>

请您提供以下材料作为参考。

获取github API的访问令牌的方法

https://github.com/settings/tokens
↓
个人访问令牌的左侧列表
↓
右上角的生成新令牌
↓
输入密钥名称
↓
在repo上勾选
↓
生成令牌

存储好访问令牌，因为它只会显示一次。