Frontend Engineer Xing
Guitar/Bass player
@matheusrocha89
@matheusrocha
fetch('https://api.domain.com/v1/users/123');
...
{
...,
data: {
id: 123,
firstName: '...',
lastName: '...',
email: '...',
...,
}
}
GraphQL is created and used internally by Facebook
GraphQL is released Open Source by Facebook
GraphQL
Client
Backend
GraphQL
Client
Backend
Backend
Nothing blocks you to create your own data types
type Character {
name: String!
appearsIn: [Episode]!
}
type Query {
posts: [Post]
author(id: Int!): Author
}
type Mutation {
upvotePost(postId: Int!): Post
}
interface Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
}
type Human implements Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
starships: [Starship]
totalCredits: Int
}
type Droid implements Character {
id: ID!
name: String!
friends: [Character]
appearsIn: [Episode]!
primaryFunction: String
}
// Query
query HeroForEpisode($ep: Episode!) {
hero(episode: $ep) {
name
... on Droid {
primaryFunction
}
}
}
fragment comparisonFields on Character {
name
appearsIn
friends {
name
}
}
{
leftComparison: hero(episode: EMPIRE) {
...comparisonFields
}
rightComparison: hero(episode: JEDI) {
...comparisonFields
}
}
// Server
type Subscription {
postAdded: Post
}
// Client
subscription {
postAdded {
id
title
content
}
}
type Author {
id: Int!
firstName: String
lastName: String
posts: [Post] # the list of Posts by this author
}
type Post {
id: Int!
title: String
author: Author
votes: Int
}
# the schema allows the following query:
type Query {
posts: [Post]
author(id: Int!): Author
}
# this schema allows the following mutation:
type Mutation {
upvotePost (
postId: Int!
): Post
}
import { find, filter } from 'lodash';
// example data
const authors = [
{ id: 1, firstName: 'Tom', lastName: 'Coleman' },
{ id: 2, firstName: 'Sashko', lastName: 'Stubailo' },
];
const posts = [
{ id: 1, authorId: 1, title: 'Introduction to GraphQL', votes: 2 },
{ id: 2, authorId: 2, title: 'Welcome to Meteor', votes: 3 },
];
const resolvers = {
Query: {
posts: () => posts,
author: (_, { id }) => find(authors, { id: id }),
},
Mutation: {
upvotePost: (_, { postId }) => {
const post = find(posts, { id: postId });
if (!post) {
throw new Error(`Couldn't find post with id ${postId}`);
}
post.votes += 1;
return post;
},
},
Author: {
posts: (author) => filter(posts, { authorId: author.id }),
},
Post: {
author: (post) => find(authors, { id: post.authorId }),
},
};
http://graphql.org/swapi-graphql/
https://developer.github.com/v4/explorer/
https://github.com/matheusrocha89/graphql-with-firestore-example
https://github.com/matheusrocha89/graphql-camara-deputados
Graphile - https://www.graphile.org/