http://localhost:8080/speaker	200	fetch	1.6 KB	851 ms
http://localhost:8080/talk/1	200	fetch	260 B	262 ms
http://localhost:8080/talk/2	200	fetch	273 B	310 ms
http://localhost:8080/talk/3	200	fetch	254 B	299 ms
http://localhost:8080/talk/4	200	fetch	261 B	297 ms
http://localhost:8080/talk/5	200	fetch	293 B	284 ms

compile "org.grails:gorm-graphql:1.0.2"
compile "org.grails.plugins:gorm-graphql:1.0.2"

package com.objectcomputing

import grails.rest.Resource

@Resource(uri='/talk')
class Talk {

    String title
    int duration

    static graphql = true (1)

    static belongsTo = [speaker: Speaker]
}

package com.objectcomputing

import grails.rest.Resource
import org.grails.gorm.graphql.entity.dsl.GraphQLMapping
import java.time.LocalDate
import java.time.Period

@Resource(uri='/speaker')
class Speaker {

    String firstName
    String lastName
    String name
    String email
    String bio
    LocalDate birthday

    static hasMany = [talks: Talk]

    static graphql = GraphQLMapping.build {

        property 'lastName', order: 1 (1)
        property 'firstName', order: 2
        property 'email', order: 3

        exclude 'birthday' (2)

        property 'name', deprecationReason: 'To be removed August 1st, 2020' (3)

        property('bio') { (4)
            order 4
            dataFetcher { Speaker speaker ->
                speaker.bio ?: "No biography provided"
            }
        }

        add('age', Integer) { (5)
            dataFetcher { Speaker speaker ->
                Period.between(speaker.birthday, LocalDate.now()).years
            }
            input false
        }
    }

    static constraints = {
        email nullable: true, email: true
        birthday nullable: true
        bio nullable: true
    }

    static mapping = {
        bio type: 'text'
        name formula: 'concat(FIRST_NAME,\' \',LAST_NAME)'
        talks sort: 'id'
    }

}

~ npm install apollo-client-preset react-apollo graphql-tag graphql --save

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './css/bootstrap.css';
import './css/App.css';
import './css/grails.css';
import './css/main.css';
import {ApolloProvider} from 'react-apollo';
import {ApolloClient} from 'apollo-client';
import {createHttpLink} from 'apollo-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory';
import { SERVER_URL} from "./config";

(1)
const client = new ApolloClient({
  link: createHttpLink({ uri: `${SERVER_URL}/graphql` }), (2)
  cache: new InMemoryCache()
});

(3)
ReactDOM.render(< ApolloProvider client={client}>
  <App />
</ApolloProvider>, document.getElementById('root'));

import React, {Component} from 'react'
import Speaker from "./Speaker";
import {graphql} from 'react-apollo'; (1)
import gql from 'graphql-tag';  (2)

class SpeakerList extends Component {

(3)
  render() {
    const speakers = this.props.data.speakerList; (4)
    return speakers ? [speakers.map(s => <Speaker key={s.id} speaker={s}/>)] : <p>Loading...</p>
  }
}

const SPEAKER_QUERY = gql`query {        speakerList(max: 10) { (5)
  id, firstName, lastName,
    talks { id }
  }
}`;

(6)
const SpeakerListWithData = graphql(SPEAKER_QUERY,
    {options: {pollInterval: 5000}} (7)
)(SpeakerList);
export default SpeakerListWithData; (8)

import React, {Component} from 'react'
import {Well} from 'react-bootstrap'
import Talk from "./Talks";

class Speaker extends Component {

  constructor() {
    super();

    this.state = {
      title: '',
      duration: ''
    }
  }

//... other methods ommitted for space

  render() {
    const {speaker} = this.props;
    const {title, duration} = this.state;

    return <Well>
      <h3>{speaker.firstName} {speaker.lastName}</h3>
      <hr/>

      <ul>
        {speaker.talks.map(t => <Talk key={t.id} talk={t} delete={() => this.deleteTalk(t.id)}/>)}
        <li>
          <label>Title</label>
          <input type='text' name='title' value={title}
                 onChange={this.handleNewTalkChange}/>

          <label>Duration</label>
          <input type="number" name="duration" value={duration}
                 onChange={this.handleNewTalkChange}/>
          <button onClick={this.addNewTalk}>Add Talk</button>
        </li>
      </ul>

    </Well>
  }
}

export default Speaker;

const SPEAKER_QUERY = gql`query {
speakerList(max: 10) {
  id, firstName, lastName,
    talks { id, title, duration } (1)
  }
}`;

const talkCreate = gql`
    mutation talkCreate($talk: TalkCreate!) {
        talkCreate(talk: $talk) {
            id
            title
            duration
        }
    }
`;

const talkDelete = gql`
    mutation talkDelete($id: Long!) {
        talkDelete(id: $id) {
            error
        }
    }
`;

import {graphql, compose} from 'react-apollo'
import gql from 'graphql-tag'

const SpeakerWithMutations = compose(
  graphql(talkCreate, {
      props: ({mutate}) => ({
          talkCreate: ({talk}) =>
            mutate({
                variables: {talk},
            })
      })
  }),
  graphql(talkDelete, {
      props: ({mutate}) => ({
          talkDelete: ({id}) =>
            mutate({
                variables: {id},
            })
      })
  })
)(Speaker)

export default SpeakerWithMutations;

addNewTalk = () => {
    const {title, duration} = this.state;
    const {speaker} = this.props;

    this.setState({title: '', duration: ''});

    this.props.talkCreate({talk: {title, duration, speaker: {id: speaker.id}}})
      .then(({data}) => console.log('create response:', data))
      .catch((error) => console.log('there was an error sending the query', error));
};

deleteTalk = (id) => {
    this.props.talkDelete({id: id})
      .then(({data}) => console.log('delete response: ', data))
      .catch((error) => console.log('there was an error sending the query', error));
};