Rails と Nuxt.js で構成されたアプリケーションに GraphQL を導入します。 簡略化のためモデル作成や認証はせず、動作確認まで行います。

前提 #

Rails & Nuxt.jsのDocker環境をalpineイメージで構築する
こちらのポストの環境をもとに進めるので、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

ライブラリ追加 #

Rails #

• graphql-ruby ... Ruby で GraphQL を導入するならコレ
• graphiql-rails ... GraphQL IDE の Rails 版。ブラウザから

Gemfile を修正し、 bundle install します。

## 中略 ##

gem 'graphql' # 追加

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' # 追加
end

## 中略 ##

docker-compose exec backend bundle install

Nuxt #

• apollo-module

こちらのライブラリをインストールします。
本記事では graphql-tag は使いません。

docker-compose exec frontend yarn add @nuxtjs/apollo

実装 #

backend(rails) #

generator で雛形を作成します。

docker-compose exec backend rails g graphql:install

graphiql-rails の Readme にしたがって、Rails の config ファイルを修正します。

• 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

• config/application.rb
  API モードの場合に必要な修正です。

## 中略 ##

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

## 中略 ##

GraphiQLで動作確認 #

docker コンテナを再起動後、ブラウザで http://localhost:3000/graphiql にアクセスし、GraphiQL を開きます。
app/graphql/types/query_type.rb のサンプルを利用して、下記のように query の結果が返ってくれば OK です。

docker-compose restart backend

frontend(nuxt) #

Nuxt アプリのルートに、下記のディレクトリ、ファイルを追加、編集します。
今回 mutation は使いませんが、あわせて作成しておきます。

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

• nuxt.config.js
  Nuxt で apollo クライアントを使用するための設定を追加します。
  default.js を読み込まず、nuxt.config.js に直書きしても OK です。

export default {

  /* 中略 */

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

  /* 中略 */

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

• apollo/client-configs/default.js
  apollo には様々なオプションありますが、今回は query の実行が確認できればよいので最低限です。
  uri のホスト名は、Docker の Rails アプリのサービス名 backend になります。

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

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

• apollo/gqls/queries/testField.gql
  GraphiQL で実行したものです。

query {
  testField
}

• pages/index.vue
  query を実行した結果を表示します。

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

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

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

お疲れさまでした。
(簡略化しすぎた感)