使用GraphQL将Rails和React连接起来

3 年 ago
韵, 科
2 minutes

由於剛才的文章中我們已經使用docker-compose成功建立了Rails和React，所以這次我們將繼續進行將它們與GraphQL連接的步驟！

Ruby on Rails中的GraphQL配置

首先，我們將Rails連接到GraphQL。
關於Rails端的設定，我們參考了這篇文章。

首先，您需要安装GraphQL的gem包。

gem 'graphql'

group :development do
  gem 'graphiql-rails'
end

用这个命令进行一次依赖包安装: bundle install

当安装了GraphQL后，可以通过rails g graphql:install命令快速创建所需的全部文件。

在API模式下，由于一些部分未被添加，因此需要进行补充。

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

require "sprockets/railtie"

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

为了启用React端的连接，请在application.rb文件中添加以下内容。关于这一点，我对它的理解还不够深入，所以以后再写一篇文章来解释！

config.hosts = nil
config.autoloader = :classic

在Rails端的设置已经完成了！

运行 `docker-compose up -d`，然后访问 `http://localhost:3000/graphiql`，就可以看到 GraphiQL 的界面。

在左边

query{
  testField
}

写下来，然后尝试点击按钮。

在右边

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

当你出来了，就成功了！

Rails-GraphQL.png

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

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

代理（proxy）是指将来自http://localhost:4000的请求原封不动地传递到http://rails:3000。这里的rails:3000是通过docker-compose创建的rails容器的3000端口。因此，通过这种方式可以将来自React的GraphQL请求发送到Rails端。

只要设定了这样的代理，所有的路径都会被发送到Rails，但根据发送内容进行选择的代理会很好地工作（因为对这方面不是很熟悉，所以如果明白了的话会在其他地方再写）。

既然准备工作已经完成，我打算立即进行实施。

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;

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。如果出现下面的页面，说明成功了！

React-GraphQL.png

以上是连接Rails和React的GraphQL方法的结束！

因为在很多细节方面我仍然存在理解不足的地方，所以我希望能继续学习并扩充知识。

bannerAds