Giter Site home page Giter Site logo

gauravtiwari / relay-rails-blog Goto Github PK

View Code? Open in Web Editor NEW
139.0 5.0 18.0 1.09 MB

A graphql, relay and standard rails application powered demo weblog. We are using Graphql server and relay for our react component data needs.

Home Page: https://relay-rails-blog.herokuapp.com/

Ruby 41.94% JavaScript 21.59% CSS 27.70% HTML 8.01% Shell 0.04% CoffeeScript 0.72%
relay graphql-ruby rails graphql

relay-rails-blog's Introduction

Demo blog application powered by Rails, react, graphql and Relay.

This blog is an exploration exercise to understand two new technologies - GraphQL and Relay. We are using standard rails application together with webpack for handling front-end dependencies.

Status

Application supports reading and creating data from and on server using GraphQL.

Tutorial:

  1. Introduction: https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-getting-started-955a49d251de
  2. Part1: https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-creating-types-and-schema-b3f9b232ccfc#.6micmekh2
  3. Part2: https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-first-relay-powered-react-component-cb3f9ee95eca#.ssisfzsm0
  4. Part3: https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-dynamic-component-rendering-2be4e208ef92#.gvw5kevg1
  5. Part4 https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-authentication-and-authorisation-f7c07ebb47b3#.2y1h14x2p
  6. Part5 - Integrating Webpack with react-on-rails https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-moving-to-webpack-9c6a420b4eea#.60z7xg1j0
  7. Final - Wrap up https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-wrap-up-500c67522cd2#.gt0b65fa7

Current features

  • List posts
  • List comments of the posts
  • Infinite Scroll - posts and comments
  • Show author info, votes and comments count
  • Mutations to create comments and votes
  • Edit and Update comments
  • Create and Delete posts
  • Add a react native app https://github.com/gauravtiwari/graphql-blog-mobile

Demo Links

Resources

TODOs

Running locally

To run the application, please just clone the repo and run it like so:

git clone [email protected]:gauravtiwari/relay-rails-blog.git
cd relay-rails-blog
bundle install
npm install
./start (from terminal). If you get permission error, just do chmod 777 start

relay-rails-blog's People

Contributors

gauravtiwari avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

relay-rails-blog's Issues

generate schema.json

If I remove schema.json, what command should I run to generate a new schema.json file?

Doesn't this allow someone to delete anything?

There's a pretty serious hole in site security with this code.

Here:
https://github.com/gauravtiwari/relay-rails-blog/blob/master/app/api/mutations/comment_mutations.rb#L52

comment = RelaySchema.object_from_id(inputs[:id], ctx)
comment.destroy

I could pass in the global id for an admin's User record and it would load then destroy it. There are no protections around whether it actually loaded a Comment or whether the User has permissions to delete that Comment. I can destroy any object in the DB with that code.

Create/Edit Posts.

Any chance you will be continuing to update this repo with Create/Edit Post functionality?

Posts controller, routes and views

I'm guessing the posts controller, routes and views on the rails side are left-over artifacts from the earlier react-rails version? Am I right, or am I confused?

undefined method `offset' for #<struct Viewer id={:id=>"root"}>

@gauravtiwari thanks for the tutorial it helped me to get started with Relay and GraphQL on rails.
I am implementing an application that uses bits and pieces of your example code. But now I have an issue with the mutation code. In my case I create a new Contact record and I'm using the following snipped in my mutation code:

connection = GraphQL::Relay::RelationConnection.new(viewer, {})
    edge = GraphQL::Relay::Edge.new(contact, connection)
    {
        viewer: viewer,
        contactEdge: edge
    }

And then when post a new contact item I get the following error:
undefined method `offset' for #<struct Viewer id={:id=>"root"}>

Digging into the RelationConnection code I see the following code that I think is causing the error:

      # apply first / last limit results
      def paged_nodes
        @paged_nodes ||= sliced_nodes.limit(limit)
      end

      # Apply cursors to edges
      def sliced_nodes
        @sliced_nodes ||= nodes.offset(starting_offset)
      end

The Viewer class you added does not have an offset or limit method.
Do you have any ideas how to solve this issue? Thanks!

Field 'post' doesn't exist on type 'Query'

Hi Gaurav,

I'm seeing the following issue on a new installation of this repo:

relay-rails-blog/rails c
Loading development environment (Rails 4.2.5)
2.3.0 :001 > Schema = GraphQL::Schema.new(query: QueryType)
 => #<GraphQL::Schema:0x007fed02293398 @query=Query, ... > 
2.3.0 :002 > query_string = "query getPost { post(id: 1) { id, title, body } }"
 => "query getPost { post(id: 1) { id, title, body } }" 
2.3.0 :003 > result_hash = Schema.execute(query_string)
 => {"errors"=>[{"message"=>"Field 'post' doesn't exist on type 'Query'", "locations"=>[{"line"=>1, "column"=>1}]}]} 

I'm also seeing this similar issue on my own project.

Has graphql-ruby or graphql-relay-ruby changed expectations of how graph types should be defined?

The demo doesn't work for me

https://relay-rails-blog.herokuapp.com just shows a spinner endlessly. I was able to create an user but the posts page (root) never renders. At first I though maybe your heroku instance was asleep, but I'm not sure that's the problem.

BTW excellent series of posts on this subject, very much appreciated.

GraphQL controllers

Sorry about pestering you so often. I'm just wondering if you can explain the difference between the /graphql and /queries endpoints? The /graphql endpoint seems to be the registered endpoint for the client (clientRegistration.jsx)... just not sure where /queries endpoint is called from.

Is it possible to have server-side rendering?

I tried to set up server-side rendering with isomorphic-relay. But I got stuck because it seems that with ExecJS (with Node.js backend), Promises can't be consumed. I tried a very basic Promise in my server startup file.

var promise = Promise.resolve("foobar");
var response = promise.then((res) => { console.log(res) }, (e) => {console.log(e)})
console.log(response)

The above code will log [Object Promise]. But normally it should be foobar and {}. I didn't find much about whether Promise are supported in ExecJS. But this is obviously a key in server-side rendering with a GraphQL client. Do you have any idea on this issue?

Problem with installing the bundle

First of all, thanks for your time invested in this demo and tutorial. I kind of hope this woulnd't be dead (looking at latest commit date), but let's try.

I cloned the repository and tried running bundle install, but the versions are so old that it would not let me install anything.

❯ bundle install
The git source `git://github.com/rails/turbolinks.git` uses the `git` protocol, which transmits data without encryption. Disable this warning with `bundle config git.allow_insecure true
`, or switch to the `https` protocol to keep your data secure.
Following files may not be writable, so sudo is needed:
  /Library/Ruby/Gems/2.3.0
  /Library/Ruby/Gems/2.3.0/build_info
  /Library/Ruby/Gems/2.3.0/cache
  /Library/Ruby/Gems/2.3.0/doc
  /Library/Ruby/Gems/2.3.0/extensions
  /Library/Ruby/Gems/2.3.0/gems
  /Library/Ruby/Gems/2.3.0/specifications
Fetching git://github.com/rails/turbolinks.git
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "bundler":
  In Gemfile:
    rails (= 4.2.5) was resolved to 4.2.5, which depends on
      bundler (< 2.0, >= 1.3.0)

  Current Bundler version:
    bundler (2.0.1)
This Gemfile requires a different version of Bundler.
Perhaps you need to update Bundler by running `gem install bundler`?

Could not find gem 'bundler (< 2.0, >= 1.3.0)', which is required by gem 'rails (= 4.2.5)', in any of the sources.

Bundler could not find compatible versions for gem "rails":
  In Gemfile:
    rails (= 4.2.5)

    react-rails (~> 1.5.0) was resolved to 1.5.0, which depends on
      rails (>= 3.2)

Bundler could not find compatible versions for gem "ruby":
  In Gemfile:
    ruby (~> 2.3.7.0)

    web-console was resolved to 4.0.0, which depends on
      ruby (>= 2.5)

I tried updating rails (to 5.2.2) but it only lead to a bunch of other errors of the same nature and I definitely didn't obtain that much knowledge yet, so I cannot fix them by myself. So before finding another outdated tutorial @gauravtiwari may be you have time to fix it :)

Question about SEO

Given Relay mandates these globally unique IDs, how do we optimize for SEO/SEM? The URL now contains ugly non-meaningful GUIDs instead of URL-friendly and SEO'd names for our posts.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.