- Relay is a library that uses GraphQL as its query language and is designed to efficiently manage data fetching and caching for React applications. - GraphQL provides an alternative to REST APIs that focuses on only fetching the necessary data in a single request. It allows clients to define precisely the data they need through a type system. - Relay colocates queries and components to optimize data fetching. It caches data to improve performance and allows components to declare their data requirements through fragments.

1. Exploring
Relay-land
Stefano Masini
@stefanomasini

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?

8. GraphQL
• GOALS:
• Space efficient (on the wire)
• Computationally efficient (server side)

9. GraphQL
DEMO

10. GraphQL is a type system
User
Site Site
Project Project Project
User
Type
Site
Type
Project
Type
SitesOfUser
Type
ProjectsOfSite
Type

11. Edges
Edges
Node
Node
Node
Relay enhanced Type
System
User
Site Site
Project Project Project
User
Type
Site
Type
SitesOfUser
Type
Project
Type
ProjectsOfSite
Type

12. Relay caching (UI)
User X Site A Project 1 Project 2
Relay cache
React view
Server

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?

20. Mutations
Server
Client
"Fat query"

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

23. Query Configuration
Relay Container
Rendering in Relay
Component

24. Rendering in React-Router
/user/14/settings
/ <Application>
user/14 <User>
settings <Settings>

25. / Q RC <Application>
user/14 Q RC <User>
Relay + Router NAIVE
/user/14/settings
settings Q RC <Settings>

26. Smart Root Container
/ RC <Application>
user/14 RC <User>
react-router-relay
/user/14/settings
settings RC <Settings>

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

33. RELAY IS
AWESOME but...

34. Limitations*
• Poor error handling
• ORM-like, hard to optimize DB access
• Root queries
• Subscriptions
* as of Feb 2016

35. Relay is COMPLEX
Is you app
COMPLEX too?
YES
Give it a try!
NO
Wanna
learn?
Not today, thanks
Stay with REST
and Redux
YES

36. Thanks!
@stefanomasini
video and slides