Apollo updatequeries example

back.js

const express = require('express')
const { apolloExpress, graphiqlExpress  } = require('apollo-server');
const cors = require('cors')
const { makeExecutableSchema } = require('graphql-tools')
const bodyParser = require('body-parser')

const typeDefs = `
  type Minimal{
    id: ID!
    name: String
  }
  input MinimalInput{
     name: String
  }
  type Query {
    minimals:[Minimal]
  }
  type Mutation{
    setMinimal(data:MinimalInput):Minimal
  }
`
let currentId = 3
let theDataBase = [
  {id:1,name:'Foo'},
  {id:2,name:'Bar'}
]
const resolvers = {
  Query: {
    minimals(){
      return theDataBase
    }
  },
  Mutation:{
    setMinimal(root,params){
      const {data} = params
      console.log(params)
      const newData = {
        id:currentId++,
        name:data.name
      }
      theDataBase.push(newData)
      return newData
    }
  }
}
const schemaOptions = {
  typeDefs,
  resolvers
}
const schema = makeExecutableSchema(schemaOptions)
const app = express()
app.use(cors())

app.use('/graphql',
     bodyParser.json(), 
     apolloExpress({ 
        schema
     })
)
app.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql',
}));
const httpPort = process.env.PORT || 4000 
app.listen(httpPort,  "0.0.0.0", () => console.log(`Now browse to localhost:${httpPort}/graphiql for UI or localhost:${httpPort}/graphql for API`))

front.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import gql from 'graphql-tag'
import ApolloClient, { createNetworkInterface } from 'apollo-client'
import { ApolloProvider, graphql } from 'react-apollo'
const client = new ApolloClient({
  networkInterface: createNetworkInterface({uri: 'http://localhost:4000/graphql'})
})
const BaseList = React.createClass({
  sendMutation () {
    const data = {name: this.refs.input.value}
    this.props.setMinimal({variables: {data}})
  },
  render () {
    let minimals = []
    if (this.props.data.minimals) {
      minimals = this.props.data.minimals
    }
    return (
      <div>
        <ul>
          {
            minimals.map((item) => {
              return (
                <li key={item.id}>{`${item.id} ${item.name}`}</li>
              )
            })
          }
        </ul>
        <input ref={'input'} />
        <button onClick={this.sendMutation}>
          {'Send'}
        </button>
      </div>
    )
  }
})
const query = gql`
  query MyQueryName {
    minimals{
      id
      name
    }
  }
`
const setMinimalQuery = gql`
  mutation ($data:MinimalInput) {
    setMinimal(data:$data){
      name
      id
    }
  }
`
const updateQueries = {
  'MyQueryName': (prev, { mutationResult, queryVariables }) => {
    const newData = mutationResult.data.setMinimal
    const newMinimals = prev.minimals.concat([newData])
    return {minimals: newMinimals}
  }
}
const props = ({ ownProps, mutate }) => {
  return {
    setMinimal ({variables}) {
      return mutate({
        variables,
        updateQueries
      })
    }
  }
}
const List = graphql(setMinimalQuery, {props})(graphql(query)(BaseList))
const app = (
  <ApolloProvider client={client} >
    <List />
  </ApolloProvider>
)
ReactDOM.render(
  app,
  document.getElementById('app')
)