GraphQL Rails Blog

This application can be used as starter kit if you want to get started building an app with Rails, React, and GraphQL. This is a simple blog engine using ordinary features which can be found in most web applications.

If you are interested by Elixir, I created a similar application with Phoenix and Absinthe that you might like: Yummy Phoenix GraphQL.

Technologies

Frontend

• TypeScript - A superset of JavaScript that compiles to clean JavaScript output.
• React - A JavaScript library for building user interfaces. It introduces many great concepts, such as, Virtual DOM, Data flow, etc.
• Create React App - is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
• Bulma - Bulma is a modern CSS framework based on Flexbox
• Apollo 2 - A flexible, fully-featured GraphQL client for every platform.
• React Final Form - High performance subscription-based form state management for React.

Backend

• Ruby 2.4
• Rails 5.1
• GraphQL-Ruby - GraphQL-Ruby is a Ruby implementation of GraphQL.
• GraphQL-batch - GraphQL-batch is a query batching executor for the graphql gem.
• Graphiql - Graphiql is an in-browser IDE for exploring GraphQL.
• Rack CORS - Rack Middleware for handling Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible.
• Optics Agent - Optics Agent for GraphQL Monitoring
• SQLite3 for development and PostgreSQL for production.

Features

• CRUD (create / read / update / delete) on posts
• Creating comments on post page
• Pagination on posts listing
• Searching on posts
• Authentication with Devise and authorizations (visitors, users, admins)
• Creating user account
• Update user profile and changing password
• Setup dev tools
• Application ready for production

GraphQL Using

• Queries et mutations
• FetchMore for pagination
• Using apollo-cache-inmemory
• Apollo Link (dedup, onError, auth)
• Managing local state with Apollo Link
• Optimistic UI
• Static GraphQL queries
• Validation management and integration with Final Form
• Authentication and authorizations
• Protect queries and mutations on GraphQL API
• Batching of GraphQL queries into one HTTP request
• Batching of SQL queries backend side

Prerequisites

• Ruby 2.4
• Node 9.2 (Installing Node)
• SQLite3

Getting Started

• Install Bundler

      $ gem install bundler
  

• Checkout the graphql-rails-blog git tree from Github

      $ git clone https://github.com/MatthieuSegret/graphql-rails-blog.git
      $ cd graphql-rails-blog
      graphql-rails-blog$
  

• Run Bundler to install/bundle gems needed by the project:

      graphql-rails-blog$ bundle
  

• Create the database:

      graphql-rails-blog$ rails db:migrate
  

• Load sample records:

      graphql-rails-blog$ rails db:seed
  

• Run the Rails server in development mode

      graphql-rails-blog$ rails server
  

• Run Yarn to install javascript package in other terminal:

      graphql-rails-blog$ cd client
      graphql-rails-blog/client$ yarn
  

• Start client in development mode. You should be able to go to http://localhost:8080 :

        graphql-rails-blog/client$ yarn start
  

Next step

• Use subscription GraphQL feature
• Create mobile app with React Native

Screens

Listing posts

Creating comments

Post page

Editing post

License

MIT © Matthieu Segret