Exploring Relay land
•
2 likes•1,140 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.
Report
Share
Related slideshows
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