RailsとReactをGraphQLでつなぐ

前回の記事でdocker-composeを使ってRailsとReactを立ち上げることができたので今回はこれらをGraphQLでつなぐところまでやっていきます！

Rails側のGraphQL設定

まずはRailsをGraphQLにつなぎます
※Rails側の設定についてはこちらの記事を参考にさせていただきました

最初にGraphQLのgemをインストールします

Gemfile

gem 'graphql'

group :development do
  gem 'graphiql-rails'
end

これで一回bundle install

GraphQLが入ったのでrails g graphql:installで必要なファイルが一通り作られます

APIモードでは一部追加されない部分があるので追加します

config/route.rb

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

config/application.rb

require "sprockets/railtie"

app/assets/config/manifest.js

//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

最後にReact側からの接続を有効にするためにapplication.rbに以下を追記します。こちらに関してはまだ理解が足りてないのでまた改めて記事を...！

config/application.rb

config.hosts = nil
config.autoloader = :classic

これでRails側の設定は完了です！

docker-compose up -dをして、http://localhost:3000/graphiqlにアクセスするとgraphiqlの画面がでてきます

左側に

query{
  testField
}

と書いて▶ボタンを押してみましょう

右側に

{
  "data": {
    "testField": "Hello World!"
  }
}

と出てきたら成功です！

React側のGraphQL設定

ReactでもGraphQLを設定していきます

まずパッケージのインストールを行います

package.jsonのdependenciesに以下を追加します(バージョンは記事を書いたときのものなので適宜変更をおねがいします)

"@apollo/react-hooks": "3.1.5",
"apollo-boost": "0.4.9",
"apollo-client": "^2.6.4",
"graphql": "^14.3.1",
"graphql-tag": "2.10.3",
"react-apollo": "3.1.5",
"react-router-dom": "5.2.0",

※apollo-boostは他のもので代用可能です。apollo-boostはカスタマイズ性に乏しいらしいので人によっては使わないほうがいいかもしれないです。詳しくはこちらの記事とドキュメントをご覧ください

また、RailsとReactをつなぐためにproxyを使います。

package.json

"proxy": "http://rails:3000"

proxyというのは英語で代理人という意味でhttp://localhost:4000に来たリクエストをhttp://rails:3000にそのまま渡します。rails:3000というのはdocker-composeで作成したrailsコンテナの3000番ポートのことなのでこれでReactに来たGraphQLのリクエストをRails側に送ることができます

※このようにproxyを設定すると他のパスもすべてRailsに送られてしまうのではないかと思いますがリクエストで送る内容に応じてうまくproxyするものを選んでくれるみたいです(この辺そんなに詳しくないのでちゃんとわかったらまたどこかで書こうと思います)

接続の準備ができたので早速実装していこうと思います

src/App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from "@apollo/react-hooks"
import Top from './pages/Top';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql'
})

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client} >
        <div className="App">
          <Router>
            <Route exact path='/' component={Top}/>
          </Router>
        </div>
      </ApolloProvider>
    );
  }
}

export default App;

src/pages/Top.js

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const TEST = gql`
  query test {
    testField
  }
`;

export default function Top() {
  const { loading, data } = useQuery(TEST, {});
  if (loading) return <p>Loading ...</p>;
  return <h1>{data.testField}</h1>;
}

これで設定は完了です！docker-compose up -dしてhttp://localhost:4000にアクセスしてみましょう。下の画面のようにでてくれば成功です！

以上でGraphQLでRailsとReactをつなぐ方法は終わりです！

まだまだ細かいところで理解不足なところが多いのでそこは引き続き勉強して拡充していければと思います