2. Relay
• Automatic fetching of data, no more Ajax
• Colocation of queries and code
• Caching
• Good for API mashup
• Why not?
3. A new beginning
• How to fetch data from the server?
• How to write data to the server?
• How to handle URL routing?
• How to manage application (UI) state?
• How to propagate server push notifications?
4. Size of libraries
LOC - *.js in github project as of Feb 2016
0 K
20 K
40 K
60 K
80 K
100 K
React Relay GraphQL React
Router
Redux
5. Popularity of libraries
# stars in github project as of Feb 2016
0 K
8 K
16 K
24 K
32 K
40 K
React Relay GraphQL React
Router
Redux
6. Stars per Line Of Code
AKA what's the smartest idea out there? :-)
React Relay GraphQL React
Router
Redux
7. Topics
• How to fetch data from the server?
• How to write data to the server?
• How to handle URL routing?
• How to manage application (UI) state?
• How to propagate server push notifications?
13. Schema
let schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'RootQueryType',
fields: () => ({
node: nodeField,
loggedUser: {
type: UserType,
description: 'The logged user',
resolve: (_, _, {rootValue: {loggedUser}}) => loggedUser,
},
})
}),
});
14. The User Type
let UserType = new GraphQLObjectType({
name: 'User',
interfaces: [nodeInterface],
fields: () => ({
id: globalIdField('User', user => user.id),
node: nodeField,
sites: {
type: UsersInSiteConnection,
description: 'All sites the logged user has access to',
resolve: (user, args, {rootValue: {db}}) =>
connectionFromPromisedArray(
db.getSitesForAUser(user),
args
),
},
})
});
15. Querying with REST
User
Site Site
Project Project Project
/user/14/all_my_sites
SELECT *
FROM users
LEFT JOIN sites
LEFT JOIN projects
WHERE ...
16. GraphQL is like an ORM
User
Site Site
so, beware!
query {
user(userId: "14") {
sites {
...
}
}
}
17. GraphQL is like an ORM
User
Site Site
Project Project Project
so, beware!
query {
user(userId: "14") {
sites {
projects {
...
}
}
}
}
18. GraphQL is like an ORM
User
Site Site
Project Project Project
so, beware!
resolve(...)
resolve(...)
SELECT *
FROM sites
WHERE ...
SELECT *
FROM projects
WHERE ...
n x
19. Topics
• How to fetch data from the server?
• How to write data to the server?
• How to handle URL routing?
• How to manage application (UI) state?
• How to propagate server push notifications?
21. Topics
• How to fetch data from the server?
• How to write data to the server?
• How to handle URL routing?
• How to manage application (UI) state?
• How to propagate server push notifications?
22. @relayContainer({
fragments: {
user: () => Relay.QL`
fragment on User {
firstName,
lastName,
}
`,
},
})
class UserFullName extends React.Component {
render() {
return <p>
{this.props.user.firstName} {this.props.user.lastName}
</p>;
}
}
Rendering in Relay
27. Topics
• How to fetch data from the server?
• How to write data to the server?
• How to handle URL routing?
• How to manage application (UI) state?
• How to propagate server push notifications?
28. Relay + Redux
Relay
data store
Redux
data store
• Site Name
• Projects in a Site
• Dialog (open/close)
• New project form
Edit existing project form
???
29. Topics
• How to fetch data from the server?
• How to write data to the server?
• How to handle URL routing?
• How to manage application (UI) state?
• How to propagate server push notifications?
30. Keeping clients in sync
Server
Client
Cache
Client
Cache
Client
Cache
AKA: Live Queries
31. Subscriptions*
• GraphQL "subscription" operator
• Modeled after "events"
• Client must register/deregister
• Server must fire the right events in the right
places
* yet to come, as of Feb 2016
32. I like Relay and GraphQL
• Modeling this way is fun
• It Just Makes Sense®
• It scales well