创建一个代码谱投稿应用程序#3（在Rails中引入GraphQL）

2 年 ago

科, 雅

2 minutes

上一篇文章

GraphQL的引入背景

最初本来的打算并不打算引入，但听说新加入的人正在使用Rails＆GraphQL来实现后端，所以为了练习，我们决定匆忙引入。
以前我们已经使用过shopify的购物车系统的graphQLAPI来实现前端，所以在调用端我们已经使用过GraphQL，但是之前从未创建过API，所以还是要熟悉一下…

由于有很多其他很好的文章涵盖了GraphQL是什么以及与REST API的区别，因此我们不做详细介绍。

GraphQL的安装

在进行GraphQL公式的Rails教程时，我会继续前进。

首先，下载gem。

添加到Gemfile中，并

gem "graphql"

执行命令

$ docker-compose run --rm web bundle install
$ docker-compose run --rm rails g graphql:install

听说有时候可能需要再次运行”bundle install”命令。

$ docker-compose run --rm web bundle install

安装已完成。

实施

我們打算用一個名為Score的物件來表示樂譜，所以首先創建這個表格。

首先创建表格。
仅拥有一个属性，即标题（title）。

$ docker-compose run --rm web bundle exec rails g model Score title:string
$ docker-compose run --rm web bundle exec rails db:migrate

用以下命令创建GraphQL对象。它将根据最后指定的Score及相同名称的表格（通过上述命令创建）生成类型定义文件。

$ docker-compose run --rm web rails g graphql:object Score

将会创建/app/graphql/types/score_type.rb。

# frozen_string_literal: true

module Types
  class ScoreType < Types::BaseObject
    field :id, ID, null: false
    field :title, String
    field :created_at, GraphQL::Types::ISO8601DateTime, null: false
    field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
  end
end

标题即使没有特别指定，也得到了很好的反映。

编辑/app/graphql/types/query_type.rb文件。定义schema。暂时只定义查询(query)部分。

module Types
  class QueryType < Types::BaseObject
    # Add `node(id: ID!) and `nodes(ids: [ID!]!)`
    include GraphQL::Types::Relay::HasNodeField
    include GraphQL::Types::Relay::HasNodesField

    field :scores, [Types::ScoreType], null: false
    def scores
      Score.all
    end

    field :score, Types::ScoreType, null: false do
      argument :id, Int, required: false
    end
    def score(id:)
      Score.find(id)
    end
  end
end

我想现在可以使用GraphQL了，所以我会在控制台中验证一下它的运行情况。

$ docker-compose rum --rm web bundle exec rails c

以命令行方式启动。

> Score.create(title: "title")

创建数据。
在官方中，我们创建了一个继承自GraphQL::Schema的类，但是在AppSchema中也可以进行操作确认。

> AppSchema.execute("{scores{id title}}").to_hash
    Score Load (17.1ms)  SELECT `scores`.* FROM `scores`
    => {"data"=>{"scores"=>[{"id"=>"1", "title"=>"title"}]}}

看起来已经成功获取了！虽然想把它变为UUID，但在MySQL中好像有些困难呢…

暫時就到這裡吧。下次我們可以做到在前端顯示的部分吧！

填補不足

听说有一个叫做graphiql的宝石，可以在本地服务器上验证graphql的操作。但是出现了一个名为ActionDispatch::Request::Session::DisabledSessionError的错误，导致无法显示。听说从Rails 7开始转为API模式会禁用会话，看起来解决此问题的方法似乎并不存在，所以我决定暂时不使用这个宝石。在控制台上也可以确认，所以应该没关系吧。如果能使用apollo，那也应该可以实现同样的效果。

我参考了一篇网站或者文章。

初めてのGraphQL with Rails