Exploring Relay land
2 likes1,143 views
- 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.
![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
),
},
})
});](https://image.slidesharecdn.com/exploringrelay-land-160229222619/85/Exploring-Relay-land-14-320.jpg)
Exploring Relay land
- 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?
- 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
- 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