Joe Karlsson
progress. tech. cats. coffee. art. food. photog. mpls.
slides.com/joekarlsson | @joekarlsson1
GraphQL created at Facebook
Support Mobile Native Teams
GitHub announces GraphQL API
New GraphQL website
First GraphQL Summit
GraphQL First
GraphQL Europe
Apollo Client 0.10.0 (RC-0)
// GET '/graphql'
{
user(name: "gsans") {
twitter
}
}
// result
{
"user": {
"twitter": "@gerardsans"
}
}
source: blog
schema {
query: Query,
mutation: Mutation
}
type Query {
allTodoes(skip: Int, take: Int): [Todo!]!
}
type Todo {
id: ID!
text: String!
complete: Boolean!
}
schema {
query: Query,
mutation: Mutation
}
type Mutation {
addTodo(text: String!, complete: Boolean!): Todo
deleteTodo(id: ID!, text: String, complete: Boolean): Todo
}
// server/graphql/schema
const {
GraphQLObjectType,
GraphQLNonNull,
GraphQLSchema,
GraphQLString,
GraphQLList,
GraphQLInt,
GraphQLBoolean
} = require("graphql/type");
const todoType = new GraphQLObjectType({
name: "todo",
description: "todo item",
fields: () => ({
itemId: {
type: GraphQLInt,
description: "The id of the todo."
},
item: {
type: GraphQLString,
description: "The name of the todo."
},
completed: {
type: GraphQLBoolean,
description: "Completed todo?"
}
})
});
// server/graphql/schema
const ToDoMongo = require("../database/Todo");
const TodoQueryType = new GraphQLObjectType({
name: "RootQueryType",
fields: {
todo: {
type: new GraphQLList(todoType),
description: "Todo items",
args: {
itemId: {
name: "itemId",
type: new GraphQLNonNull(GraphQLInt)
}
},
resolve: (root, { itemId }, source, fieldASTs) => {
const foundItems = new Promise((resolve, reject) => {
ToDoMongo.find({ itemId }, (err, todos) => {
err ? reject(err) : resolve(todos);
});
});
return foundItems;
}
}
}
});
const schema = new GraphQLSchema({
query: TodoQueryType
});
module.exports = schema;
// server/graphql/schema
todos: {
type: new GraphQLList(todoType),
description: "All todo items",
args: {},
resolve: () => {
const foundItems = new Promise((resolve, reject) => {
ToDoMongo.find((err, todos) => {
err ? reject(err) : resolve(todos);
});
});
return foundItems;
}
},
// server/server.js
const graphqlHTTP = require("express-graphql");
app.use(
"/graphql",
graphqlHTTP(request => {
return {
schema: schema,
graphiql: true,
pretty: true,
formatError: error => ({
message: error.message,
locations: error.locations,
stack: error.stack ? error.stack.split("\n") : [],
path: error.path
})
};
})
);
// server/graphql/schema.js
const TodoMutationType = new GraphQLObjectType({
name: 'todoMutation',
description: 'These are the things we can change on a todo item.',
fields: () => ({
AddTodo: {
type: todoType,
description: 'Create a todo and return the new todo.',
args: {
itemId: {
type: new GraphQLNonNull(GraphQLInt),
description: 'The id of the todo.',
},
item: {
type: new GraphQLNonNull(GraphQLString),
description: 'The name of the todo.',
},
completed: {
type: GraphQLBoolean,
description: 'Has the todo been completed?',
}
},
resolve: (value, { itemId, item, completed }) => {
const newTodo = new Promise((resolve, reject) => {
ToDoMongo.create({itemId, item, completed},(err, todo) => {
err ? reject(err) : resolve(todo);
});
});
return newTodo
}
}
}),
});
const schema = new GraphQLSchema({
query: TodoQueryType,
mutation: TodoMutationType,
});
// client/App.js
createNewTodo (event) {
event.preventDefault();
const { value } = this.state;
const resource = 'AddTodo';
const params = {itemId: 1234, item: value, completed: false};
const fields = `{itemId item completed}`;
getGraphQlData(resource, params, fields, false)
.then(newTodo => {
const newTodos = this.state.todos.slice();
newTodos.push(newTodo.data.AddTodo)
this.setState({
todos: newTodos,
value: '',
});
})
.catch(err => {
console.error('err', err);
});
}
Please fill out this feedback form:
https://goo.gl/forms/Hsn6oonjyIl1yxCm1
By Joe Karlsson
GraphQL is awesome! After only a year it has got a lot of attention from the community. Many implementations have emerged and it’s just getting better. Is GraphQL right for you? Is it a query language or runtime? In this talk I am going to take you from 0 to hero. ;)