exploring relay land
TRANSCRIPT
![Page 1: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/1.jpg)
Exploring Relay-land
Stefano Masini @stefanomasini
![Page 2: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/2.jpg)
Relay
• Automatic fetching of data, no more Ajax
• Colocation of queries and code
• Caching
• Good for API mashup
• Why not?
![Page 3: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/3.jpg)
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?
![Page 4: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/4.jpg)
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 ReactRouter
Redux
![Page 5: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/5.jpg)
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 ReactRouter
Redux
![Page 6: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/6.jpg)
Stars per Line Of Code
AKA what's the smartest idea out there? :-)
React Relay GraphQL ReactRouter
Redux
![Page 7: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/7.jpg)
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?
![Page 8: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/8.jpg)
GraphQL
• GOALS:
• Space efficient (on the wire)
• Computationally efficient (server side)
![Page 9: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/9.jpg)
GraphQL
DEMO
![Page 10: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/10.jpg)
GraphQL is a type systemUser
Site Site
Project Project Project
User Type
Site Type
Project Type
SitesOfUser Type
ProjectsOfSite Type
![Page 11: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/11.jpg)
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
![Page 12: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/12.jpg)
Relay caching (UI)
User X Site A Project 1 Project 2
Relay cache
React view
Server
![Page 13: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/13.jpg)
Schemalet schema = new GraphQLSchema({ query: new GraphQLObjectType({ name: 'RootQueryType', fields: () => ({ node: nodeField, loggedUser: { type: UserType, description: 'The logged user', resolve: (_, _, {rootValue: {loggedUser}}) => loggedUser, }, }) }), });
![Page 14: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/14.jpg)
The User Typelet 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 ), }, }) });
![Page 15: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/15.jpg)
Querying with RESTUser
Site Site
Project Project Project
/user/14/all_my_sites
SELECT * FROM users LEFT JOIN sites LEFT JOIN projects WHERE ...
![Page 16: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/16.jpg)
GraphQL is like an ORMUser
Site Site
so, beware!
query { user(userId: "14") { sites { ... } }}
![Page 17: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/17.jpg)
GraphQL is like an ORMUser
Site Site
Project Project Project
so, beware!
query { user(userId: "14") { sites { projects { ... } } }}
![Page 18: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/18.jpg)
GraphQL is like an ORMUser
Site Site
Project Project Project
so, beware!
resolve(...)
resolve(...)
SELECT * FROM sites WHERE ...
SELECT * FROM projects WHERE ...
n x
![Page 19: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/19.jpg)
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?
![Page 20: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/20.jpg)
MutationsServer
Client
"Fat query"
![Page 21: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/21.jpg)
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?
![Page 22: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/22.jpg)
@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
![Page 23: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/23.jpg)
Query ConfigurationRelay Container
Rendering in Relay
Component
![Page 24: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/24.jpg)
Rendering in React-Router/user/14/settings
/ <Application>
user/14 <User>
settings <Settings>
![Page 25: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/25.jpg)
/ Q RC <Application>
user/14 Q RC <User>
Relay + Router NAIVE/user/14/settings
settings Q RC <Settings>
![Page 26: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/26.jpg)
Smart Root Container
/ RC <Application>
user/14 RC <User>
react-router-relay/user/14/settings
settings RC <Settings>
![Page 27: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/27.jpg)
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?
![Page 28: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/28.jpg)
Relay + ReduxRelay
data storeRedux
data store
• Site Name • Projects in a Site
• Dialog (open/close) • New project form
Edit existing project form???
![Page 29: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/29.jpg)
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?
![Page 30: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/30.jpg)
Keeping clients in sync
Server
Client
Cache
Client
Cache
Client
Cache
AKA: Live Queries
![Page 31: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/31.jpg)
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
![Page 32: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/32.jpg)
I like Relay and GraphQL
• Modeling this way is fun
• It Just Makes Sense®
• It scales well
![Page 33: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/33.jpg)
RELAY IS
AWESOMEbut...
![Page 34: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/34.jpg)
Limitations*
• Poor error handling
• ORM-like, hard to optimize DB access
• Root queries
• Subscriptions
* as of Feb 2016
![Page 35: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/35.jpg)
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
![Page 36: Exploring Relay land](https://reader031.vdocument.in/reader031/viewer/2022030316/587933141a28ab7c448b6ee5/html5/thumbnails/36.jpg)
Thanks!
@stefanomasini
video and slides