Rails:GraphiQL API를 작성하려면

Rails를 통해 Graph QL API를 구성하는 단계를 정리합니다.

공식 문서

https://graphql-ruby.org/getting_started.html

전제 조건

이쪽의 절차에 따라 개발 환경을 구축하는 것을 전제로 한다.
https://zenn.dev/kei178/articles/43172ba33eece4

1. GraphiQL 설정

설치하다.

설치graphql.
project-backend/Gemfile

+ gem 'graphql'

부팅된 백엔드의 프로세스 이름을 확인하고 컨테이너에 들어갑니다.

docker ps
docker exec -it project_backend_1 sh

설치 명령을 실행합니다.

bundle install
bundle exec rails g graphql:install

필요한 파일 그룹은 app/graphql 아래에서 생성됩니다.

2. GraphiQL 쿼리

GraphiQL에서 자원Post의 데이터를 얻을 수 있도록 허용합니다.

유형 만들기

Post에서 자원PostType의 유형을 정의합니다.
project-backend/app/graphql/types/post_type.rb

module Types
  class PostType < Types::BaseObject
    description "A blog post"
    field :id,    ID,     null: false
    field :title, String, null: false
    field :body,  String, null: false
  end
end

질의 작성

그런 다음 질의 논리를 정의합니다.

BaseQuery

project-backend/app/graphql/queries/base_query.rb

module Queries
  class BaseQuery < GraphQL::Schema::Resolver; end
end

조회 관련 서류를 총결산app/graphql/queries.

PostsQuery

Post의 일람을 얻다.
project-backend/app/graphql/queries/posts_query.rb

module Queries
  class PostsQuery < Queries::BaseQuery
    type [Types::PostType], null: false

    def resolve
      Post.limit(50)
    end
  end
end

PostQuery

ID 지정을 통해 해당하는 1건Post을 얻습니다.
project-backend/app/graphql/queries/post_query.rb

module Queries
  class PostQuery < Queries::BaseQuery
    type Types::PostType, null: false
    argument :id, ID, required: true

    def resolve(id:)
      Post.find(id)
    end
  end
end

QueryType에 정의된 조회를 기록하여 루트 조회로 얻을 수 있도록 합니다.
project-backend/app/graphql/types/query_type.rb

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

    # Add root-level fields here.
    # They will be entry points for queries on your schema.
    field :posts, resolver: Queries::PostsQuery
    field :post,  resolver: Queries::PostQuery
  end
end

GraphiQL을 통해 동작 확인

테스트 도구 "GraphiQL"로 동작을 확인해 보세요.

field :posts

field :post

정상 가동.

3. GraphiQL 음소거

GraphiQL에서 자원Post의 데이터를 업데이트할 수 있습니다.

음소거 만들기

PostInputType

업데이트 처리에 필요한 입력 데이터 형식을 정의합니다.
project-backend/app/graphql/types/input/post_input_type.rb

module Types
  module Input
    class PostInputType < GraphQL::Schema::InputObject
      argument :id,    Int,    required: true
      argument :title, String, required: false
      argument :body,  String, required: false
    end
  end
end

입력 데이터의 유형은 app/graphql/types/input로 요약된다.

UpdatePost

업데이트에 해당하는 Post 처리를 정의합니다.
project-backend/app/graphql/mutations/update_post.rb

module Mutations
  class UpdatePost < Mutations::BaseMutation
    argument :params, Types::Input::PostInputType, required: true

    def resolve(params:)
      post_params = params.to_h
      post = Post.find(post_params.delete(:id))
      post.update!(post_params.compact)
      post
    end
  end
end

정음 집계app/graphql/mutations.

MutationType

MutationType에 정의된 업데이트 처리를 기록합니다.
project-backend/app/graphql/types/mutation_type.rb

module Types
  class MutationType < Types::BaseObject
    field :update_post, Types::PostType, mutation: Mutations::UpdatePost
  end
end

GraphiQL을 통해 동작 확인

테스트 도구 "GraphiQL"로 동작을 확인해 보세요.

변량

{
  "params": {
    "id": 1,
    "title": "Title updated from GraphQL"
  }
}

조회

mutation($params: PostInputType!) {
  updatePost(input: { params: $params }) {
    id
    title
  }
}

키input에 대상이 없으면 오류가 발생합니다.

실행 결과

문제 없이 업데이트되었습니다.

다음 단계

프런트엔드 Apollo Client의 구축 단계를 요약합니다.
https://zenn.dev/kei178/articles/8c6ad6fd91c9de