{"id":18433546,"url":"https://github.com/tonkpils/grrr","last_synced_at":"2025-04-07T19:31:28.354Z","repository":{"id":147478672,"uuid":"93278371","full_name":"Tonkpils/GRRR","owner":"Tonkpils","description":"Creating a GraphQL Rails, React, Relay application","archived":false,"fork":false,"pushed_at":"2017-06-03T23:10:33.000Z","size":4,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T23:04:04.305Z","etag":null,"topics":["graphql-ruby","react","react-relay","ruby-on-rails"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tonkpils.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-03T23:03:18.000Z","updated_at":"2021-12-16T08:30:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"de3b10f5-c309-41d9-9573-642fa7837468","html_url":"https://github.com/Tonkpils/GRRR","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2FGRRR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2FGRRR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2FGRRR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tonkpils%2FGRRR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tonkpils","download_url":"https://codeload.github.com/Tonkpils/GRRR/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247716262,"owners_count":20984208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql-ruby","react","react-relay","ruby-on-rails"],"created_at":"2024-11-06T05:34:50.648Z","updated_at":"2025-04-07T19:31:28.348Z","avatar_url":"https://github.com/Tonkpils.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to setup an app with GraphQL, Rails, React, Relay\n\n## Generate a new app\n\n1. run `rails new APP_NAME --webpack=react --database=postgresql --skip-test --skip-coffee`\n    \n    - --skip-test, --database, and --skip-coffee is optional\n1. add `react-rails` to Gemfile\n1. add `graphql` to Gemfile\n1. run `bundle install`\n1. run `rails g graphql:install`\n1. run `rails g react:install`\n1. run `yarn add react-relay@^1.0.0`\n1. run `yarn add relay-compiler@^1.0.0 babel-plugin-relay@^1.0.1 --dev`\n1. add `\u003c%= javascript_pack_tag 'application' %\u003e` to `app/views/layouts/application.html.erb`\n1. add `\u003c%= stylesheet_pack_tag 'application' %\u003e` to `app/views/layouts/application.html.erb`\n1. move `app/javascript/packs/hello_react.jsx` to `app/javascript/components/hello_react.jsx`\n1. modify the generated GraphQL schema file which should be under `app/graphql/app_name_schema.rb`\n\n   ```ruby\n   AppNameSchema = GraphQL::Schema.define do\n     query(Types::QueryType)\n   end\n\n   module RelaySchemaHelpers\n     # Schema.json location\n     SCHEMA_DIR  = Rails.root.join('app/javascript/packs/')\n     SCHEMA_PATH = File.join(SCHEMA_DIR, 'schema.json')\n     def execute_introspection_query\n       # Cache the query result\n       Rails.cache.fetch checksum do\n         AppNameSchema.execute GraphQL::Introspection::INTROSPECTION_QUERY\n       end\n     end\n\n     def checksum\n       files   = Dir['app/graphql/**/*.rb'].reject { |f| File.directory?(f) }\n       content = files.map { |f| File.read(f) }.join\n       Digest::SHA256.hexdigest(content).to_s\n     end\n\n     def dump_schema\n       # Generate the schema on start/reload\n       FileUtils.mkdir_p SCHEMA_DIR\n       result = JSON.pretty_generate(AppNameSchema.execute_introspection_query)\n       unless File.exist?(SCHEMA_PATH) \u0026\u0026 File.read(SCHEMA_PATH) == result\n         File.write(SCHEMA_PATH, result)\n       end\n     end\n   end\n\n   AppNameSchema.extend RelaySchemaHelpers\n   ```\n\n1. Add the following to .babelrc\n\n   ```json\n   [\n     \"relay\",\n     {\n       \"schema\": \"app/javascript/packs/schema.json\",\n       \"debug\": true\n     }\n   ],\n   ```\n\n1. add `__generated__/` to `.gitignore`\n1. create a `Procfile` with the following contents\n\n   ```\n   web: bundle exec puma -t 5:5 -p ${PORT:-3000} -e ${RACK_ENV:-development}\n   relay: yarn run relay -- --watch\n   webpacker: ./bin/webpack-dev-server\n   ```\n\n1. add the following as a script in `package.json`\n   ```\n   \"relay\": \"relay-compiler --src ./app/javascript --schema ./app/javascript/packs/schema.json\"\n   ```\n1. create a controller action and in the view you can now render your `hello_react` component \n   ```\n   \u003c%= react_component 'hello_react' %\u003e\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonkpils%2Fgrrr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonkpils%2Fgrrr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonkpils%2Fgrrr/lists"}