Book Image

Learning GraphQL and Relay

By : Samer Buna
Book Image

Learning GraphQL and Relay

By: Samer Buna

Overview of this book

<p>There’s a new choice for implementing APIs – the open source and Facebook-created GraphQL specification. Designed to solve many of the issues of working with REST, GraphQL comes alongside RelayJS, a React library for querying a server that implements the GraphQL specification. This book takes you quickly and simply through the skills you need to be able to build production ready applications with both GraphQL and RelayJS.</p> <p>Beginning with a solid foundation in the GraphQl specification, this book swiftly moves to how a data layer can be implemented for your web application using Relay. Get to grips with GraphQL and Relay concepts creating data containers, data masking, and more as your progress towards building a production-ready application.</p>
Table of Contents (15 chapters)

Relay.Mutation


We'll first need an event handler to invoke the mutation. We'll use a click handler on the thumbs-up icon.

In the displayLikes() method on the Quote component (in js/Quote.js), modify the span for the icon to include an onClick event:

  displayLikes() { 
    if (!this.props.relay.variables.showLikes) { 
      return null; 
    } 
    return ( 
      <div> 
        {this.props.quote.likesCount} &nbsp; 
        <span className="glyphicon glyphicon-thumbs-up" 
              onClick={this.thumbsUpClick}></span> 
      </div> 
    ); 
  } 

thumbsUpClick will simply instantiate a mutation class and pass it to Relay.Store.commitUpdate:

  // In js/quote.js Quote component definition 
  thumbsUpClick = () => { 
    Relay.Store.commitUpdate( 
      new ThumbsUpMutation({ 
        quote: this.props.quote 
      }) 
    ) 
  }; 

The instantiated object from...