How to setup an app with GraphQL, Rails, React, Relay

Generate a new app

1. run rails new APP_NAME --webpack=react --database=postgresql --skip-test --skip-coffee

   • --skip-test, --database, and --skip-coffee is optional

2. add react-rails to Gemfile

3. add graphql to Gemfile

4. run bundle install

5. run rails g graphql:install

6. run rails g react:install

7. run yarn add react-relay@^1.0.0

8. run yarn add relay-compiler@^1.0.0 babel-plugin-relay@^1.0.1 --dev

9. add <%= javascript_pack_tag 'application' %> to app/views/layouts/application.html.erb

10. add <%= stylesheet_pack_tag 'application' %> to app/views/layouts/application.html.erb

11. move app/javascript/packs/hello_react.jsx to app/javascript/components/hello_react.jsx

12. modify the generated GraphQL schema file which should be under app/graphql/app_name_schema.rb

    AppNameSchema = GraphQL::Schema.define do
      query(Types::QueryType)
    end
    
    module RelaySchemaHelpers
      # Schema.json location
      SCHEMA_DIR  = Rails.root.join('app/javascript/packs/')
      SCHEMA_PATH = File.join(SCHEMA_DIR, 'schema.json')
      def execute_introspection_query
        # Cache the query result
        Rails.cache.fetch checksum do
          AppNameSchema.execute GraphQL::Introspection::INTROSPECTION_QUERY
        end
      end
    
      def checksum
        files   = Dir['app/graphql/**/*.rb'].reject { |f| File.directory?(f) }
        content = files.map { |f| File.read(f) }.join
        Digest::SHA256.hexdigest(content).to_s
      end
    
      def dump_schema
        # Generate the schema on start/reload
        FileUtils.mkdir_p SCHEMA_DIR
        result = JSON.pretty_generate(AppNameSchema.execute_introspection_query)
        unless File.exist?(SCHEMA_PATH) && File.read(SCHEMA_PATH) == result
          File.write(SCHEMA_PATH, result)
        end
      end
    end
    
    AppNameSchema.extend RelaySchemaHelpers
    

13. Add the following to .babelrc

    [
      "relay",
      {
        "schema": "app/javascript/packs/schema.json",
        "debug": true
      }
    ],
    

14. add __generated__/ to .gitignore

15. create a Procfile with the following contents

    web: bundle exec puma -t 5:5 -p ${PORT:-3000} -e ${RACK_ENV:-development}
    relay: yarn run relay -- --watch
    webpacker: ./bin/webpack-dev-server
    

16. add the following as a script in package.json

    "relay": "relay-compiler --src ./app/javascript --schema ./app/javascript/packs/schema.json"
    

17. create a controller action and in the view you can now render your hello_react component

    <%= react_component 'hello_react' %>