All Projects → MatthieuSegret → Graphql Rails Blog

MatthieuSegret / Graphql Rails Blog

Licence: mit
Blog App built with Rails 5, React and GraphQL

Programming Languages

javascript
184084 projects - #8 most used programming language
ruby
36898 projects - #4 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Graphql Rails Blog

Niklick
Rails Versioned API solution template for hipsters! (Ruby, Ruby on Rails, REST API, GraphQL, Docker, RSpec, Devise, Postgress DB)
Stars: ✭ 39 (-75.62%)
Mutual labels:  graphql, rails, starter-kit
Meteor Apollo Starter Kit
Meteor, Apollo, React, PWA, Styled-Components boilerplate
Stars: ✭ 91 (-43.12%)
Mutual labels:  graphql, apollo, starter-kit
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+1045.63%)
Mutual labels:  graphql, apollo, starter-kit
Reactconfbr
Public infos and issues about React Conf Brasil organization
Stars: ✭ 156 (-2.5%)
Mutual labels:  graphql, apollo
Portara
Portara directive is a rate limiter / throttler for GraphQL
Stars: ✭ 158 (-1.25%)
Mutual labels:  graphql, apollo
Subzero Starter Kit
Starter Kit and tooling for authoring GraphQL/REST API backends with subZero
Stars: ✭ 136 (-15%)
Mutual labels:  graphql, starter-kit
Apollo Universal Starter Kit
Apollo Universal Starter Kit is an SEO-friendly, fully-configured, modular starter application that helps developers to streamline web, server, and mobile development with cutting-edge technologies and ultimate code reuse.
Stars: ✭ 1,645 (+928.13%)
Mutual labels:  graphql, apollo
Countries
🌎 Public GraphQL API for information about countries
Stars: ✭ 156 (-2.5%)
Mutual labels:  graphql, apollo
Reason Apollo Hooks
Deprecated in favor of https://github.com/reasonml-community/graphql-ppx
Stars: ✭ 140 (-12.5%)
Mutual labels:  graphql, apollo
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-11.87%)
Mutual labels:  graphql, starter-kit
Spree
Open Source headless multi-language/multi-currency/multi-store eCommerce platform
Stars: ✭ 11,571 (+7131.88%)
Mutual labels:  graphql, rails
Gatsby Blog Starter Kit
A simple starter kit for a static blog created with Gatsby
Stars: ✭ 131 (-18.12%)
Mutual labels:  graphql, starter-kit
Next Advanced Apollo Starter
Advanced, but minimalistic Next.js pre-configured starter with focus on DX
Stars: ✭ 131 (-18.12%)
Mutual labels:  graphql, apollo
Graphql Cli
📟 Command line tool for common GraphQL development workflows
Stars: ✭ 1,814 (+1033.75%)
Mutual labels:  graphql, apollo
Join Monster Graphql Tools Adapter
Use Join Monster to fetch your data with Apollo Server.
Stars: ✭ 130 (-18.75%)
Mutual labels:  graphql, apollo
Relay Rails Blog
A graphql, relay and standard rails application powered demo weblog. We are using Graphql server and relay for our react component data needs.
Stars: ✭ 140 (-12.5%)
Mutual labels:  graphql, rails
Meteor Apollo Accounts
Meteor accounts in GraphQL
Stars: ✭ 145 (-9.37%)
Mutual labels:  graphql, apollo
Graphql Query Resolver
Minimize N+1 queries generated by GraphQL and ActiveRecord
Stars: ✭ 148 (-7.5%)
Mutual labels:  graphql, rails
Awesome Apollo Graphql
A curated list of amazingly awesome things regarding Apollo GraphQL ecosystem 🌟
Stars: ✭ 126 (-21.25%)
Mutual labels:  graphql, apollo
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-20.62%)
Mutual labels:  graphql, apollo

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

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

Listing posts

Creating comments

Creating comments

Post page

Post page

Editing post

Editing post

License

MIT © Matthieu Segret

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].