Skip to content

Instantly share code, notes, and snippets.

@drFabio
Created October 21, 2016 22:57
Show Gist options
  • Save drFabio/c7f3353b441634166a65911cceee3db9 to your computer and use it in GitHub Desktop.
Save drFabio/c7f3353b441634166a65911cceee3db9 to your computer and use it in GitHub Desktop.
Apollo updatequeries example
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`))
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')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment