Rails6 API 모드에서 GraphQL을 사용하는 방법 (오류 대책 포함)

5147 단어 Rails6GraphQLRailsapi

소개



rails에서 GraphQL을 사용하는 방법을 정리해 보았습니다.

필요한 최소한의 구현에 그치고, GraphQL의 동작 확인을 할 수 있는 것을 메인에 소개합니다. (+α로 에러의 대책을 기재했습니다.)
따라서 Query를 설정하지 않았습니다.

【참고】
Rails API 모드로 시작하는 GraphQL
【Rails】graphql-ruby로 API 작성

앱 만들기



터미널
$ rails new demo-graphql --api       #オプションで--apiをつけるとAPIモードでappを作成

Gemfile에 graphql , graphiql-rails (개발 환경에서 사용) 추가

Gemfile
gem 'graphql'    #追加

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'graphiql-rails'   #開発環境に追加
end

코멘트 아웃 제거

config/application.rb
require "sprockets/railtie"    #コメントアウトを外す

터미널에서 다음을 실행

터미널
$ bundle install
$ rails generate graphql:install   #GraphQLに関するファイルが作成されます
routes.rb 에 다음을 추가

routes.rb
Rails.application.routes.draw do
  if Rails.env.development?
    # add the url of your end-point to graphql_path.
    mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/graphql" 
  end
  post '/graphql', to: 'graphql#execute'  #ここはrails generate graphql:installで自動生成される
end

동작 확인



rails s 후 http://localhost:3000/graphiql 에 연결. (graphql이 아니라 graphiql과 "i"가 들어 있으므로주의하시기 바랍니다. 위의 routes에서 변경하고 있습니다.)
아래와 같은 화면이 되면 접속 성공!


시도에 Query를 보내면 설정을하지 않으므로 오류가 반환됩니다.


GraphiQL에 연결할 수 없는 경우(Sprockets::Rails::Helper::AssetNotPrecompiled in GraphiQL::Rails::Editors#show)



어느 기사를 봐도 상기의 설정 밖에 소개되고 있지 않고, 그대로 실장해도 에러가 나왔으므로 대책 방법을 소개합니다.
API 모드로 작성하면 assets가 작성되지 않기 때문에 원인인 것 같습니다.
[Rails6][sprockets4.0.0]Sprockets를 사용하지 않도록 app/assets 폴더 아래를 삭제하면 Sprockets::Railtie::ManifestNeededError가 발생했습니다.

어느 쪽인가를 하면 괜찮기 때문에 개발 환경에 맞추어 선택해 주세요.

에러 내용↓


대책 ① assets/config/manifest.js 작성



assets/config/manifest.js 파일을 만들고 아래를 설명합니다.

assets/config/manifest.js
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

대책② gem 'sprocket' 버전 3.7.2로 낮추기



sprockets4.0.0이 된 후 assets 파일이 없으면 오류가 발생하는 것 같습니다.

그래서 버전을 낮추면 해소할 수 있습니다.

Gemfile
gem 'sprockets', '~> 3.7.2'  #追加する

터미널
$ bundle update

끝에



이번에는 rails6에서 GraphQL을 사용할 수 있도록하는 것에 초점을 맞추었습니다.
실제로 Query를 만들고 데이터를 받는 곳은 다른 기사를 참조하십시오.

좋은 웹페이지 즐겨찾기