在Rails和Nuxt.js的应用程序中引入GraphQL

前提 tí)

使用alpine镜像构建Rails和Nuxt.js的Docker环境
请根据此帖子中的环境继续操作，适当地将Docker服务名称等进行替换，谢谢。

以下为中文翻译的一种可能选项：

目录结构
在下文的命令中，Rails被命名为backend，而Nuxt被命名为frontend作为Docker服务的名称。

.
├── backend <- Ruby on Rails
│   ├── Dockerfile
│   ├── Gemfile
│   ├── Gemfile.lock
│   (中略)
│   
├── frontend <- Nuxt.js
│   ├── Dockerfile
│   ├── README.md
│   ├── nuxt.config.js
│   ├── package-lock.json
│   ├── package.json
│  (中略)
│
├── docker-compose.yml
└── .env

添加图书馆

轨道

graphql-ruby … RubyでGraphQLを導入するならコレ

graphiql-rails … GraphQL IDE のRails版。ブラウザから

我們會修改/backend/Gemfile檔案並運行bundle install。

## (中略) ##

gem 'graphql' #added

group :development do
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'

  gem 'graphiql-rails' #added
end

## (中略) ##

$ docker-compose exec backend bundle install

Nuxt可以在中文中称作诺克斯。

apollo-module

在这里我要安装这个库。
在本文中我们不使用 graphql-tag。

$ docker-compose exec frontend yarn add @nuxtjs/apollo

实施

铁轨

我們在生成器中創建模板。

$ docker-compose exec backend rails g graphql:install

根据 graphiql-rails 的 Readme，在 Rails 的 config 文件中进行修改。

./后端/配置/routes.rb

将GraphiQL引擎挂载，并使其可以从浏览器访问。

Rails.application.routes.draw do
  post "/graphql", to: "graphql#execute" #generatorでinsertされる
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

  #added
  if Rails.env.development?
    mount GraphiQL::Rails::Engine, at: '/graphiql', graphql_path: '/graphql'
  end
end

./backend/config/application.rb 系统后端配置中的 application.rb 文件

这是在API模式下所需的修正。

## (中略) ##

- # require "sprockets/railtie"
+ require "sprockets/railtie"

## (中略) ##

使用GraphiQL进行操作验证

重新启动docker容器后，在浏览器中访问 http://localhost:3000/graphiql ，打开GraphiQL页面。
使用./backend/app/graphql/types/query_type.rb中的示例，如果查询的结果返回如下结果，那就可以了。

$ docker-compose restart backend

Nuxt 是一个用于构建 Vue.js 应用程序的开源框架。

在Nuxt应用的根目录下，添加和编辑以下的目录和文件。
尽管本次不使用mutation，但还是一并创建在首先。

.
└── frontend 
    ├── nuxt.config.js
    │
    ├── pages
    │   └── index.vue
    │
    └── apollo
        ├── client-configs
        │   └── default.js
        └── gqls
            ├── mutations
            └── queries
                └── testField.gql

./前端/nuxt.config.js

可以在Nuxt中添加配置以使用Apollo客户端。
您可以直接在nuxt.config.js中输入，而无需读取default.js。

export default {

  /* (中略) */

  modules: [
    '@nuxtjs/apollo', //added
  ],

  /* (中略) */

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

./前端/apollo/客户端配置/default.js

虽然 Apollo 有各种选项，但本次只需确认查询是否成功执行，所以最基本的设置即可。
URI的主机名将设置为 Docker 上 Rails 应用的服务名 backend。

import { HttpLink } from 'apollo-link-http'

export default () => {
  const httpLink = new HttpLink({ uri: 'http://backend:3000/graphql' })
  return {
    link: httpLink
  }
}

./前端/阿波罗/gqls/查询/测试字段.gql

这是在GraphiQL上执行的。

query {
  testField
}

./前端页面/主页.vue

我们将显示执行查询后的结果。

<template>
  <p>{{ testField }}</p>
</template>

<script>
import testField from '~/apollo/gqls/queries/testField';

export default {
  data() {
    return {
      testField: {}
    }
  },
  apollo: {
    testField: {
      query: testField
    }
  }
}
</script>

辛苦了。(简略化得太过了感觉)