GraphQL
A data query language for UIs
{
user(id: 3500401) {
id
name
isViewerFriend
profilePicture(size: 50) {
uri
width
height
}
}
}Declarative
Responses are decided by the client rather than the server, with field-level granularity. The data is structured but backed by arbitrary application code.
Compositional
Queries are a hierarchical set of nested fields, shaped just like the returned data.
Strongly Typed
Documentation & introspection are baked-in, and queries can be validated at development time.
Why not REST?
Object Graphs
Fetching complicated object graphs require many API calls and multiple round trips between the client and server to render single views.
Over Fetching
Data payloads tend to grow over time, even if the client does not always need every field.
Weakly Typed
Writing code using documentation instead of interactive tooling is tedious and error prone.
Single page load in the Clients Application.
Feel the pain…
What about Falcor?
Falcor represents your application data
as a single JSON model.
model.get(
"users[3500401]['id', 'name', 'isViewerFriend']",
"users[3500401].profilePicture[50]['uri','width','height']"
)Weakly Typed
Lack of introspection and tooling, makes this not much different from using a REST API. As far as I know, there's no way to automatically document the fields either.
Hard to Query
Since it's just JSON, there are no arguments, just “keys”. Searching for data with multiple parameters is not standardized and difficult.
Small
Ecosystem
GraphQL has a much larger ecosystem and a very active community.
How does
GraphQL work?
Server
graphql-js
Client
Reference implementation of GraphQL for defining the schema and executing queries.
express-graphql
Creates a GraphQL HTTP Server from a schema.
dataloader
Provides batching and caching for data loading.
graphiql
An in-browser IDE for exploring GraphQL.
apollo-client
A simple caching client for any GraphQL server.
Demo Time
GraphQL
By Peter Browne
