勉強过的笔记 guò de

在REST中，对于一个API访问，只能获取一种固定形式的数据，但是使用GraphQL，可以根据自己的喜好以自己想要的组合方式获取数据。要使用这么方便的GraphQL，可以在Nuxt.js中使用Apollo，在rails中使用graphql rails库。

尽管 GraphQL 的官方文档是英文的，但它非常易懂，通过阅读文档可以大致理解其基本概念。

前端（本次使用Nuxt.js）

安装部分省略
在nuxt.config.js文件中写入设置。
内容是调用API的位置。

...,
apollo: {
    clientConfigs: {
      httpEndpoint: `http://localhost:4000/graphql`
    }
  },
...

查询

查询是指请求数据的行为。
在apollo/queries目录下编写各种查询。
例如，apollo/queries/item.gql。

# 引数の定義を書いておく
query Item($id: Int!){
  # 引数を書く
  item(id: $id) {
    #欲しいフィールドを書いていく
    id
    name
    price
    userId
    imageUrl
    explanation
  }
}

请查看相关文件以获得更详细资料。

变异

当进行数据修改或删除时，可以使用mutation（变异）。
将mutation文件编写在apollo/mutation下。
例如，apollo/mutation/deletelike.gql。

mutation ($id: ID!){
  deleteItem(input: {id: $id}){
    Item {
      id
    }
  }
}

查询和变异的使用方式

考虑在index.vue中使用作为一个例子。

在 script 标签内，从 gql 文件中导入 query/ mutation 的名称。

比如说，

import Item from '~/apollo/querys/item.gql'

成为这样。

当想要直接使用从查询中获取的数据时，可以使用{{ item }}。

在export default中

data(){
  ...
},
apollo {
  item: {
    query: Item
  }
},
...

描述如下。

当需要在方法内使用时

使用deleteItem的时候，

method(){
  ...,
  hoge(){
    this.$apollo.mutate({
      mutation: deleteItem,
      #以下で定義する変数はmutationファイル内で定義した変数たち
      variables: {
        id: id
      }
    })
  }
  ...
}

用中文来重新表述：
就是这样。当想要使用query时，只需要使用$apollo.query，然后将query: Item即可。

赠品

变异后，如果不进行更新，就无法在外观上显示出来。

refetchQueries: [{
          query: getUsersGql
        }]

最好执行诸如此类的操作。

在这里，服务器端（本次我们使用rails）

Gemfile写入

gem 'graphiql-rails'
gem 'graphql'

在使用bundle install命令后，运行rails g graphql:install，Rails将自动为我们进行各种设置。routes.rb将被更新如下：

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

在应用程序的目录下创建了一个graphql目录。

种类

首先，需要定义GraphQL返回数据的类型，可以在app/graphql/types下为每个模型创建一个文件。
以下是user模型的类型文件示例。

Types::UserType = GraphQL::ObjectType.define do
  # 型名
  name 'User'
  # field :(要素名), (要素のタイプ(int, string, etc))
  field :name, !types.String
  field :email, !types.String
end

查询

撰写一个请求将返回在Types文件中定义的类型的查询。

创建一个名为 app/graphql/types/query_type.rb 的文件，并在其中编写所有查询。

module Types
  class QueryType < Types::BaseObject
    # まずはクエリの大枠だけ書く
    # field :(クエリ名), Types::(定義した型名), null: (true/false) do
    field :user, Types::UserType, null: false do
      description 'ユーザ情報を1件取得する'  # クエリの説明
      argument :id, Int, required: true, description: 'ユーザID'  # クエリに回す引数
    end

    # 上のクエリの詳細の動きをクエリ名と同じ関数名で書く
    def user(id:)
      User.find(id)
    end
  end
end

实施的过程

当访问/graphql时，将执行graphController内的execute操作。

Rails.application.routes.draw do
  ...
  post '/graphql', to: 'graphql#execute'
  ...
end

class GraphqlController < ApplicationController
  ...
  def execute
    variables = ensure_hash(params[:variables])
    query = params[:query]
    operation_name = params[:operationName]
    context = {}
    result = ApiSchema.execute(query, variables: variables, context: context, operation_name: operation_name)
    render json: result
  end
  ...

params存储了调用query时的参数，并调用并执行指定的查询。