From 96e65de14cf2205a0fa9a96e3b8a7d90c1e38318 Mon Sep 17 00:00:00 2001 From: scott-knight Date: Mon, 6 Nov 2023 18:34:36 -0600 Subject: [PATCH 1/4] fix the gem to use assets without sprokets --- .../graphiql/rails/application.css | 4 ---- .../graphiql/rails/editors/show.html.erb | 7 ++++++- graphiql-rails.gemspec | 1 - readme.md | 21 ------------------- test/dummy/app/assets/config/manifest.js | 0 test/dummy/config/application.rb | 1 - 6 files changed, 6 insertions(+), 28 deletions(-) delete mode 100644 test/dummy/app/assets/config/manifest.js diff --git a/app/assets/stylesheets/graphiql/rails/application.css b/app/assets/stylesheets/graphiql/rails/application.css index 5814113..30fa2f5 100644 --- a/app/assets/stylesheets/graphiql/rails/application.css +++ b/app/assets/stylesheets/graphiql/rails/application.css @@ -1,7 +1,3 @@ -/* - = require ./graphiql-2.4.0 -*/ - html, body, #graphiql-container { height: 100%; margin: 0; diff --git a/app/views/graphiql/rails/editors/show.html.erb b/app/views/graphiql/rails/editors/show.html.erb index 1a39642..d88b25d 100644 --- a/app/views/graphiql/rails/editors/show.html.erb +++ b/app/views/graphiql/rails/editors/show.html.erb @@ -3,8 +3,13 @@ <%= GraphiQL::Rails.config.title || 'GraphiQL' %> + <%= stylesheet_link_tag("graphiql/rails/graphiql-2.4.0") %> <%= stylesheet_link_tag("graphiql/rails/application") %> - <%= javascript_include_tag("graphiql/rails/application", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/react-17.0.2", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/react-dom-17.0.2", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/fetch-0.10.1", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/graphiql-2.4.0", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/graphiql_show", nonce: true ) %> <%= content_tag :div, 'Loading...', id: 'graphiql-container', data: { diff --git a/graphiql-rails.gemspec b/graphiql-rails.gemspec index c16318c..0e8b1cd 100644 --- a/graphiql-rails.gemspec +++ b/graphiql-rails.gemspec @@ -18,7 +18,6 @@ Gem::Specification.new do |s| s.files = Dir["{app,config,lib}/**/*"] s.add_runtime_dependency "railties" - s.add_runtime_dependency "sprockets-rails" s.add_development_dependency "rails" s.add_development_dependency "sqlite3" diff --git a/readme.md b/readme.md index 961edba..da56dc1 100644 --- a/readme.md +++ b/readme.md @@ -31,27 +31,6 @@ end - `at:` is the path where GraphiQL will be served. You can access GraphiQL by visiting that path in your app. - `graphql_path:` is the path to the GraphQL endpoint. GraphiQL will send queries to this path. -#### Note on API Mode - -If you're using Rails 6 in "API mode", you'll also need to do the following: - -1. Add `require "sprockets/railtie"` to your `application.rb`. - -2. Create an `app/assets/config/manifest.js` file and add the following: - -``` -//= link graphiql/rails/application.css -//= link graphiql/rails/application.js -``` - -Additionally, for Rails 6, you'll also need to add `sass-rails` gem to your Gemfile and add a `manifest.js` file for Sprockets 4 to work: -``` ---- add to `app/assets/config/manifest.js` -//= link graphiql/rails/application.css -//= link graphiql/rails/application.js -``` -See more details in [issue #13](https://github.com/rmosolgo/graphiql-rails/issues/13#issuecomment-640366886) - ### Configuration You can override `GraphiQL::Rails.config` values in an initializer (eg, `config/initializers/graphiql.rb`). The configs are: diff --git a/test/dummy/app/assets/config/manifest.js b/test/dummy/app/assets/config/manifest.js deleted file mode 100644 index e69de29..0000000 diff --git a/test/dummy/config/application.rb b/test/dummy/config/application.rb index 3341ecb..672bf2e 100644 --- a/test/dummy/config/application.rb +++ b/test/dummy/config/application.rb @@ -2,7 +2,6 @@ require "action_controller/railtie" require "action_mailer/railtie" -require "sprockets/railtie" require "rails/test_unit/railtie" # Require the gems listed in Gemfile, including any gems From e13c512b9645b2042e324b23126095f8c647cd63 Mon Sep 17 00:00:00 2001 From: scott-knight Date: Mon, 6 Nov 2023 18:37:45 -0600 Subject: [PATCH 2/4] remove application.js it isn't needed --- app/assets/javascripts/graphiql/rails/application.js | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 app/assets/javascripts/graphiql/rails/application.js diff --git a/app/assets/javascripts/graphiql/rails/application.js b/app/assets/javascripts/graphiql/rails/application.js deleted file mode 100644 index 1d9b0c7..0000000 --- a/app/assets/javascripts/graphiql/rails/application.js +++ /dev/null @@ -1,5 +0,0 @@ -//= require ./react-17.0.2 -//= require ./react-dom-17.0.2 -//= require ./fetch-0.10.1 -//= require ./graphiql-2.4.0 -//= require ./graphiql_show From 01ff3e520dc09dfb8aa5d6798ba1eb5d06c10e2e Mon Sep 17 00:00:00 2001 From: Robert Mosolgo Date: Fri, 23 Feb 2024 13:33:02 -0500 Subject: [PATCH 3/4] Check for Propshaft or Sprockets --- .../graphiql/rails/editors/show.html.erb | 21 ++++++++++++------- test/controllers/editors_controller_test.rb | 5 ++++- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/app/views/graphiql/rails/editors/show.html.erb b/app/views/graphiql/rails/editors/show.html.erb index 2765500..575e604 100644 --- a/app/views/graphiql/rails/editors/show.html.erb +++ b/app/views/graphiql/rails/editors/show.html.erb @@ -2,14 +2,19 @@ <%= GraphiQL::Rails.config.title || 'GraphiQL' %> - - <%= stylesheet_link_tag("graphiql/rails/graphiql-2.4.0") %> - <%= stylesheet_link_tag("graphiql/rails/application") %> - <%= javascript_include_tag("graphiql/rails/react-17.0.2", nonce: true ) %> - <%= javascript_include_tag("graphiql/rails/react-dom-17.0.2", nonce: true ) %> - <%= javascript_include_tag("graphiql/rails/fetch-0.10.1", nonce: true ) %> - <%= javascript_include_tag("graphiql/rails/graphiql-2.4.0", nonce: true ) %> - <%= javascript_include_tag("graphiql/rails/graphiql_show", nonce: true ) %> + <% if defined?(Propshaft) %> + <%= stylesheet_link_tag("graphiql/rails/graphiql-3.1.1") %> + <%= stylesheet_link_tag("graphiql/rails/application") %> + <%= javascript_include_tag("graphiql/rails/react-18.2.0", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/react-dom-18.2.0", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/graphiql-3.1.1", nonce: true ) %> + <%= javascript_include_tag("graphiql/rails/graphiql_show", nonce: true ) %> + <% elsif defined?(Sprockets) %> + <%= stylesheet_link_tag("graphiql/rails/application") %> + <%= javascript_include_tag("graphiql/rails/application", nonce: true ) %> + <% else %> + <% raise "GraphiQL::Rails requires either Propshaft or Sprockets. Use `$ bundle add propshaft` or `$ bundle add sprockets-rails` to add one of them to your app." %> + <% end %> <%= content_tag :div, 'Loading...', id: 'graphiql-container', data: { diff --git a/test/controllers/editors_controller_test.rb b/test/controllers/editors_controller_test.rb index 36885e7..96b8d53 100644 --- a/test/controllers/editors_controller_test.rb +++ b/test/controllers/editors_controller_test.rb @@ -5,6 +5,7 @@ module Rails class EditorsControllerTest < ActionController::TestCase setup do @routes = GraphiQL::Rails::Engine.routes + Object.const_set(:Sprockets, :something) end teardown do @@ -13,6 +14,7 @@ class EditorsControllerTest < ActionController::TestCase GraphiQL::Rails.config.title = nil GraphiQL::Rails.config.logo = nil GraphiQL::Rails.config.headers = {} + Object.send(:remove_const, :Sprockets) end def graphql_params @@ -23,7 +25,8 @@ def graphql_params get :show, **graphql_params assert_response(:success) assert_includes(@response.body, 'my/endpoint', 'it uses the provided path') - assert_match(/application-\w+\.js/, @response.body, 'it includes assets') + # If sprockets was actually loaded, it would apply a digest to this: + assert_match(/application\.js/, @response.body, 'it includes assets') end test 'it uses initial_query config' do From 9f5035822f94671e4ab537dec2573d079cda7d2e Mon Sep 17 00:00:00 2001 From: Robert Mosolgo Date: Fri, 23 Feb 2024 13:44:39 -0500 Subject: [PATCH 4/4] Add docs for sprockets or propshaft --- readme.md | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index a1ec2a4..9c4372a 100644 --- a/readme.md +++ b/readme.md @@ -9,9 +9,11 @@ Mount the [GraphiQL IDE](https://github.com/graphql/graphiql) in Ruby on Rails. Add to your Gemfile: ```ruby -gem "graphiql-rails" +bundle add graphiql-rails ``` +Additionally, you'll need [Sprockets or Propshaft](#sprockets-or-propshaft) to serve the JS and CSS assets. + ## Usage ### Mount the Engine @@ -31,9 +33,19 @@ end - `at:` is the path where GraphiQL will be served. You can access GraphiQL by visiting that path in your app. - `graphql_path:` is the path to the GraphQL endpoint. GraphiQL will send queries to this path. -#### Note on API Mode +### Sprockets or Propshaft + +You'll need [Sprockets](https://github.com/rails/sprockets) or [Propshaft](https://github.com/rails/propshaft) to deliver the JS and CSS for GraphiQL. If you don't already have one of those, you can add them with: + +```sh +$ bundle add sprockets-rails +# or +$ bundle add propshaft +``` -If you're using Rails 6 in "API mode", you'll also need to do the following: +#### API Mode + +If you're using Rails 6+ in "API mode", you'll also need to do the following: 1. Add `require "sprockets/railtie"` to your `application.rb`. @@ -45,13 +57,14 @@ If you're using Rails 6 in "API mode", you'll also need to do the following: ``` Additionally, for Rails 6, you'll also need to add `dartsass-sprockets` gem to your Gemfile and add a `manifest.js` file for Sprockets 4 to work: + ``` --- add to `app/assets/config/manifest.js` //= link graphiql/rails/application.css //= link graphiql/rails/application.js ``` -Note that the `sassc-rails` gem is unmaintained and [breaks with the newer GraphiQL](https://github.com/rmosolgo/graphiql-rails/issues/106). -See more details in [issue #13](https://github.com/rmosolgo/graphiql-rails/issues/13#issuecomment-640366886) + +Note that the `sassc-rails` gem is unmaintained and [breaks with the newer GraphiQL](https://github.com/rmosolgo/graphiql-rails/issues/106). See more details in [issue #13](https://github.com/rmosolgo/graphiql-rails/issues/13#issuecomment-640366886) ### Configuration