我是SmartDrive公司的大木。虽然有点晚了，但这是SmartDrive Advent Calendar第25天的文章。

首先

我们公司正在开发采用GraphQL的产品。请查看我们公司第4天的圣诞日历文章，了解详细信息。GraphQL的推荐。

我们计划在开发中的产品的前端采用Nuxt.js。

由于对Nuxt中的GraphQL有一些困惑，所以我想总结一下。

执行

阿波罗模块

为了在Nuxt.js中使用GraphQL，我们可以使用Nuxt.js的apollo-module模块来处理。

Nuxt.js模块用于使用vue-apollo（集成graphql-tag加载器以解析.gql和.graphql文件）。

Vue-Apollo是一个包装了Apollo-Client的GraphQL前端库，它还为Nuxt封装了一层。

首先，需要添加一个模块。

yarn add @nuxtjs/apollo

在config中添加设置。

{
  // Add apollo module
  modules: ['@nuxtjs/apollo'],

  // Give apollo module options
  apollo: {
    clientConfigs: {
      default: '~/apollo/client-configs/default.js'
    }
  }
}

我們將記錄下apollo的設置。這次我們將嘗試使用GitHub的API。

import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

export default () => {
  const httpLink = new HttpLink({ uri: 'https://api.github.com/graphql' })

  // auth token
  const token = xxxxxxxxxxxxx

  // middleware
  const middlewareLink = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: { Authorization: `bearer ${token}` }
    })
    return forward(operation)
  })
  const link = middlewareLink.concat(httpLink)
  return {
    link,
    cache: new InMemoryCache()
  }
}

使用HttpLink将API的URL存储起来，并使用ApolloLink在请求头中添加令牌。

挫折点1

到目前为止，我只是复制并粘贴了README文件中的内容，但事实上这样是无法运行的。

哇，Apollo客户端的版本从v1系升级到v2系，所以缺少一些库！（其他代码已经是v2系编写的。）

由于README文件底部列出了缺少的内容，所以进行安装。

yarn add apollo-link-http graphql

查询

我将编写一个查询来从服务器获取数据。

我将编写一个查询来获取GitHub存储库的名称和链接的10个选项。

{
  user(login:"takanorip") {
    repositories(first:10) {
      nodes {
        name
        url
      }
    }
  }
}

零件

最后要实现View的功能。

<template>
  <ul>
    <li v-for="repo in allRepos" :key="repo.name">{{ repo.name }}</li>
  </ul>
</template>

<script>
import allRepos from '~/apollo/queries/allRepos'

export default {
  data: () => ({
    allRepos: {}
  }),
  apollo: {
    allRepos: {
      prefetch: true,
      query: allRepos,
      update: ({ user }) => user.repositories.nodes
    }
  }
}
</script>

在使用data进行数据初始化的同时，通过apollo获取数据。

困难点2

如果查询名称与要获取的对象的键不匹配的话，就需要在更新时返回数据。
在这种情况下，我们将user.repositories.nodes的内容存入allRepos。
详细信息请参见以下问题。

总结

我们公司正在热情招募想要使用Nuxt.js和GraphQ进行开发的工程师！
https://www.wantedly.com/projects/156189
https://www.wantedly.com/projects/177318