Mitch Masia
Building awesome products using React, React Native, GraphQL, and Elixir.
What is GraphQL
(with Node.js)
Mitch Masia
Let's talk about the future
Hexient Labs
This Talk is not
"everything you ever need to know about GraphQL"
"How does it parse Abstract Search Trees"
"Explain how a @directive works"
Rest is (was) awesome
/profile
/friends
/friends/5
/feed
GET
/profile
/friends
/feeds
/passwords
POST
GET /profile
{
user: {
firstName: 'Mitch',
lastName: 'Masia',
email: 'mmasia@hexientlabs.com',
city: 'Atlanta'
state: 'Georgia',
zip: '30305',
createdAt: '2018-05-11T02:58:27.918Z',
updatedAt: '2018-05-11T02:58:27.918Z',
}
}GET /profile
{
user: {
firstName: 'Mitch',
lastName: 'Masia',
email: 'mmasia@hexientlabs.com',
city: 'Atlanta'
state: 'Georgia',
zip: '30305',
createdAt: '2018-05-11T02:58:27.918Z',
updatedAt: '2018-05-11T02:58:27.918Z',
}
}What happens when we want more data???
Achieve more data!
GET /profile
{
user: {
firstName: 'Mitch',
lastName: 'Masia',
email: 'mmasia@hexientlabs.com',
// Phone (new data!)
phone: '8475252033',
city: 'Atlanta'
state: 'Georgia',
zip: '30305',
createdAt: '2018-05-11T02:58:27.918Z',
updatedAt: '2018-05-11T02:58:27.918Z',
}
}2 phone calls and 4 hours later, we have more data!
Reliable
REST is a reliable scheme that's predictable, standardized, and extremely manual
GET /profile
{
user: {
firstName: 'Mitch',
lastName: 'Masia',
email: 'mmasia@hexientlabs.com',
phone: '8475252033',
city: 'Atlanta'
state: 'Georgia',
country: 'United States',
placeId: '323lkjrl3kj4309sdcsdf8',
zip: '30305',
friends: [...],
createdAt: '2018-05-11T02:58:27.918Z',
updatedAt: '2018-05-11T02:58:27.918Z',
}
}What if we need less data???
Just ask for X?
// Request the data we want
fetch(`{API_HOST}/me?fields=firstName,lastName,email`)
// Get back the data we want
{
user: {
firstName: 'Mitch',
lastName: 'Masia',
email: 'mmasia@hexientlabs.com'
}
}Okay...
Great for Index and Show endpoints
But... maintainability
Testing nightmare
Nested Entities
Pagination + Filtering
Authorization (Zoinks!)
Authorization (Zoinks!)
// Request the data we want
fetch(
`{FACEBOOK_API_HOST}/me?fields=email,friends{email}`
)
// Get back the data we want
{
user: {
email: 'mmasia@hexientlabs.com',
friends: [
{ email: BREACH!!!!! }
]
}
}Enter graphql
Internal to FB 2012
Public Release 2015
Explosion
What isn't graphql?
A programming language
another javascript framework
a database
the silver bullet
What is graphql?
A strongly-typed query language that lets clients ask the server for the exact data they want to receive - and dictate the structure they want it in.
What is graphql?
A language-agnostic specification
Graphical projection of DB
an alternative to rest
Productivity Solution
(Context-Switching Minimization)
What?
{
profile {
id
firstName
lastName
email
createdAt
updatedAt
}
}{
profile {
id: 'asdfasldfkjl2k342l3',
firstName: 'Mitch',
lastName: 'Masia',
email: 'mmasia@hexientlabs.com',
createdAt: '...',
updatedAt: '...',
}
}Core tenets
REST
GraphQL
GET
PUT
POST
DELETE
Everything is a POSt to /graphql
Core tenets
GET requests are queries
Post/Put/Delete requests are mutations
Core tenets
A GraphQL Schema is comprised of a:
Root Query: Combination of all queries
Root Mutation: Combination of all mutations
Core tenets
Queries and Mutations can take in Input Object Types and return Object Types.
posts(filters: PostsFilter): [Posts]!Core tenets
Queries and Mutations can take in Input Object Types and return Object Types.
createPost(content: String!, link: String!): Post!Core tenets
There are several graphql clients that help us write and execute queries from the client.
Let's Play
Write a mutation
test with GraphiQL
Also interesting...
Persisted queries
Subscriptions
Versioning
Aggregation layer
Optimization
What have we learned
Solutions to under/over-fetching
boost in productivity + collaboration
Less Standardization (homeroll)
Still a ways to go
GraphQL API Structure
What have we learned
Thanks + ?
What is GraphQL (with Node.js)?
By Mitch Masia
What is GraphQL (with Node.js)?
Let's talk about the future.
