import React from 'react'; import Relay from 'react-relay'; import { PersonRow } from '../components/personRow'; class PrincipalsListComponent extends React.Component { render() { return ( <div> {this.props.peopleview.principals.map(person => <PersonRow key={person.id} person={person} />)} </div> ); } } export const PrincipalsList = Relay.createContainer(PrincipalsListComponent, { fragments: { peopleview: () => Relay.QL` fragment on viewer { principals { ${PersonRow.getFragment('person')} } } ` } });
export default Relay.createContainer(ToDoList, { initialVariables: { status: 'any', limit: 2147483647, }, prepareVariables( { status } ) { var nextStatus; if (status === 'active' || status === 'completed') { nextStatus = status; } else { // This matches the Backbone example, which displays all ToDos on an // invalid route. nextStatus = 'any'; } return { status: nextStatus, limit: 2147483647, // GraphQLInt }; }, fragments: { Viewer: () => Relay.QL` fragment on Viewer { ToDo_CompletedCount ToDos(status: $status, first: $limit) { edges { node { id ${ToDo_deleteMutation.getFragment('ToDo')} ${ToDo.getFragment('ToDo')} } } ${ToDo_list_updateMarkAllMutation.getFragment('ToDos')} } ToDo_TotalCount ${ToDo_addMutation.getFragment('Viewer')} ${ToDo_list_updateMarkAllMutation.getFragment('Viewer')} ${ToDo_deleteMutation.getFragment('Viewer')} ${ToDo.getFragment('Viewer')} } `, }, });
initialValue={group.category} /> </Formsy.Form> </Dialog> </div>; } } export default Relay.createContainer(EditGroup, { fragments: { user: () => Relay.QL` fragment on User { id, name, ${RemoveUserFromGroup.getFragment('user')}, } `, group: () => Relay.QL` fragment on Group { id, name, description, category, ${UpdateGroup.getFragment('group')}, ${RemoveUserFromGroup.getFragment('group')}, } `, }, });
export default Relay.createContainer(UserPage, { fragments: { user: () => Relay.QL` fragment on User { id, name, resources(first: 18) { edges { node { id, name, groups(first: 18) { edges { node { id, } } }, } } }, groups(first: 18) { edges { node { id, name, } } }, } `, }, });
if (relay.hasOptimisticUpdate(link)) { return 'Saving...'; } return moment(link.createdAt).format('L LT') } render() { let {link} = this.props; return ( <li> <span style={this.dateStyle()}> {this.dateLabel()} </span> <a href={link.url}>{link.title}</a> </li> ); } } Link = Relay.createContainer(Link, { fragments: { link: () => Relay.QL` fragment on Link { url, title, createdAt, } ` } }); export default Link;
lineHeight: `${spacing.desktopKeylineIncrement}px`, fontWeight: typography.fontWeightLight, backgroundColor: this.context.muiTheme.palette.primary1Color, paddingLeft: spacing.desktopGutter, marginBottom: 8, } } onTouchTap={ this._handle_onTouchTap_Drawer } > { NavMenuTitle } </div> <NavMenu value={ location.pathname } onChange={ onChangeList } /> {UserAuth} </Drawer> ); } } AppNavDrawer.contextTypes = { muiTheme: React.PropTypes.object.isRequired, router: React.PropTypes.object.isRequired }; export default Relay.createContainer( AppNavDrawer, { fragments: { }, } )
return ( <div> <Header viewer={this.props.viewer} toggleNavigation={() => this.toggleNavigation()} /> <Navigation viewer={this.props.viewer} open={this.state.navigationOpen} close={() => this.closeNavigation()} navigateTo={(route) => this.navigateTo(route)} /> <div id="container"> {this.props.children} </div> </div> ); } } export default Relay.createContainer(App, { fragments: { viewer: () => Relay.QL` fragment on Viewer { ${Header.getFragment('viewer')}, ${Navigation.getFragment('viewer')} } ` } });
import React from 'react'; import Relay from 'react-relay'; import { hashHistory } from 'react-router'; import { NavItem } from 'react-bootstrap'; class Logout extends React.Component { constructor(props) { super(props); this.logoutUser = this.logoutUser.bind(this); } logoutUser() { localStorage.clear(); hashHistory.push('/'); } render() { return ( <NavItem onClick={this.logoutUser}>Logout</NavItem> ); } } export default Relay.createContainer(Logout, { fragments: { } });
<button onClick={this.handleAddShip.bind(this)}>Add Ship</button> </li> </ol> </li> </ol> </div> ); } } export default Relay.createContainer(StarWarsApp, { fragments: { factions: () => Relay.QL` fragment on Faction @relay(plural: true) { id, factionId, name, ships(first: 10) { edges { node { id ${StarWarsShip.getFragment('ship')} } } } ${AddShipMutation.getFragment('faction')}, } `, }, });
import Relay from 'react-relay'; import HomeComponent from '../component/homeComponent'; export default Relay.createContainer(HomeComponent, { initialVariables: { genre: '' }, fragments: { /*eslint-disable no-unused-vars*/ viewer: () => Relay.QL` fragment on User { movieList(genre: $genre) { title, genres }, allGenres } ` } /*eslint-enable no-unused-vars*/ });
<ul> {this.props.job.executions.map(e => <li key={e.id}> <Link to={`/job/${this.props.job.name}/${e.revision}/${e.timestamp}`}>{e.revision} {e.timestamp}</Link> {e.success ? "SUCCESS" : "FAIL"} </li> )} </ul> </div> ); } } export default Relay.createContainer(Job, { fragments: { job: () => Relay.QL` fragment on Job { id, name, executions { revision, timestamp, success } } `, }, });
Relay.injectNetworkLayer( new RelayLocalSchema.NetworkLayer({ schema }) ) class HelloApp extends React.Component { render() { return <h1>{this.props.greetings.hello}</h1> } } HelloApp = Relay.createContainer(HelloApp, { fragments: { greetings: () => Relay.QL` fragment on Greetings { hello } ` } }) class HelloRoute extends Relay.Route { static routeName = 'Hello' static queries = { greetings: (Component) => Relay.QL` query GreetingsQuery { greetings { ${Component.getFragment('greetings')} } } `
return ( <View style={styles.container}> <Text style={ styles.greeting }> Logged in as { ' ' + this.props.Viewer.User_DisplayName } </Text> <Button onPress={ this.handle_onPress_Logout }>Log out</Button> </View> ) } } export default Relay.createContainer( Logout, { fragments: { Viewer: variables => Relay.QL` fragment on Viewer { User_DisplayName } `, }, }) const styles = StyleSheet.create( { container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, } )
import React from 'react'; import Relay from 'react-relay'; import User from './User'; const CurrentUser = (props) => ( <div> <h2>Current User</h2> <User user={props.viewer.user} /> </div> ); export default Relay.createContainer(CurrentUser, { fragments: { viewer: () => Relay.QL` fragment on ReindexViewer { user { ${User.getFragment('user')} } } `, }, });
export const Message = Relay.createContainer(_Message, { prepareVariables() { return { limit: 2147483647, // GraphQLInt }; }, fragments: { message: () => Relay.QL` fragment on Message { ${RemoveMessageMutation.getFragment('message')}, ${ChangeMessageMutation.getFragment('message')}, text, avatar, id, addedAt, } `, chat: () => Relay.QL` fragment on Chat { ${RemoveMessageMutation.getFragment('chat')}, id, total, messages(first: $limit) { edges { node { id, text, avatar, addedAt, ${ChangeMessageMutation.getFragment('message')}, }, }, }, } `, }, });
export default Relay.createContainer( class Post extends Component { state = { commentFormOpen: false, }; render() { const {post} = this.props; const {commentFormOpen} = this.state; return ( <div> <div className='row'> <Link to={`/posts/${post.id}`} className='flex'> <strong>{post.title}</strong> </Link> <User user={post.author}/> </div> <p>{post.text}</p> <hr/> </div> ); } }, { fragments: { post: () => Relay.QL` fragment on Post { id title text author { ${User.getFragment('user')} } } ` } } );
render() { const { viewer, children } = this.props; return ( <View style={styles.app}> <View style={styles.content}> <Text style={styles.header}>todos</Text> <TodoListFooter viewer={viewer} /> <TodoTextInput placeholder="What needs to be done?" autoFocus onSave={this.onNewTodoSave.bind(this)} /> </View> {children} </View> ); } } export default Relay.createContainer(TodoApp, { fragments: { viewer: () => Relay.QL` fragment on User { ${TodoListFooter.getFragment('viewer')}, ${AddTodoMutation.getFragment('viewer')} } ` } });
<div className="docs-content"> <h1 className="m-t-0">Settings Subscription</h1> <form ref="formUpdateProfile"className="form" noValidate> { fields.map((field, index) => getFormControl(field, index, errors)) } <button type="submit" className="btn btn-default" onClick={this.handleSubmit.bind(this)}>Submit</button> </form> </div> ) } } function getFormControl({id, label, placeholder, value, disabled}, index, errors) { return ( <div key={index} className={classNames('form-group', {'has-error': errors[id] }, {'hide': disabled })}> <label htmlFor="state">{label}</label> <input type="text" className="form-control" onChange={()=>{}} id={id} name={id} ref={id} placeholder={placeholder || `enter ${id}`} defaultValue={value} disabled={disabled}/> {errors[id] && <span id="helpBlock" className="help-block text-danger">{errors[id]}</span>} </div> ) } export default Relay.createContainer(SettingsSubscription, { fragments: { viewer: () => Relay.QL` fragment on Viewer { ${UpdateProfileMutation.getFragment('viewer')} } ` } });
</div> </div> </a> </div> ); } } export default Relay.createContainer(ProductItem, { fragments: { product: () => Relay.QL` fragment on ProductType { id name price { currency gross grossLocalized net } availability { ${ProductPrice.getFragment('availability')} } thumbnailUrl1x: thumbnailUrl(size: "255x255") thumbnailUrl2x: thumbnailUrl(size: "510x510") url } ` } });
export default Relay.createContainer(TodoList, { initialVariables: { status: 'any', }, prepareVariables({status}) { let nextStatus; if (status === 'active' || status === 'completed') { nextStatus = status; } else { // This matches the Backbone example, which displays all todos on an // invalid route. nextStatus = 'any'; } return { status: nextStatus, limit: 2147483647, // GraphQLInt }; }, fragments: { viewer: () => Relay.QL` fragment on User { completedCount todos(status: $status, first: $limit) { edges { node { id ${RemoveTodoMutation.getFragment('todo')} ${Todo.getFragment('todo')} } } ${MarkAllTodosMutation.getFragment('todos')} } totalCount ${AddTodoMutation.getFragment('viewer')} ${MarkAllTodosMutation.getFragment('viewer')} ${RemoveTodoMutation.getFragment('viewer')} ${Todo.getFragment('viewer')} } `, }, });
</Text> </View> ); } } export default Relay.createContainer(TodoListFooter, { initialVariables: { status: 'any', }, prepareVariables(prevVars) { return { ...prevVars, limit: 2147483647, // GraphQLInt }; }, fragments: { Viewer: () => Relay.QL` fragment on Viewer { ToDo_CompletedCount, ToDo_TotalCount } `, }, }); const styles = StyleSheet.create({ container: { alignItems: 'center', flexDirection: 'row', height: 40,
export function RelayContainer(component) { return Relay.createContainer(component, component.relay); }
Feel free to poke around and check out the other functionality that this starter kit provides. We've put together a couple tools for you to get this starter kit rolling. </div> <div style={styles.subheading.section}> So by all means, modify the code, break it, and learn about the same awesome technology that Facebook is built on. </div> </Col> </Row> <Description /> </div> ); } } export default Relay.createContainer(Body, { fragments: { } }); const styles = { heading: { padding: '100px 0 50px 0', fontSize: '25px', textAlign: 'center' }, subheading: { padding: '0 0 50px 0', fontSize: '18px', textAlign: 'center', section: { padding: '25px' }
render () { return ( <FlatButton label={this.props.label} primary={this.props.primary} secondary={this.props.secondary} onTouchTap={this.handleConfirm} /> ); } } export default Relay.createContainer(AuthenticateViewer, { fragments: { viewer: () => Relay.QL` fragment on Viewer { id, ${AuthenticateViewerMutation.getFragment('viewer')}, }, `, user: () => Relay.QL` fragment on User { id, name, ${AuthenticateViewerMutation.getFragment('user')}, } `, }, });
bounds={this.props.pattern.geometry.map((p) => [p.lat, p.lon])} > {this.getFullScreenToggle()} </Map>); } } export const RouteMapFragments = { pattern: () => Relay.QL` fragment on Pattern { code geometry { lat lon } stops { lat lon name gtfsId ${StopCardHeader.getFragment('stop')} } ${RouteLine.getFragment('pattern')} } `, }; export default Relay.createContainer(RouteMapContainer, { fragments: RouteMapFragments, });
import Relay from 'react-relay' class Item extends Component { render() { const { score, url, title, by } = this.props.store return ( <div> <h1><a href={url}>{title}</a></h1> <h2>{score} - {by.id}</h2> <hr /> </div> ) } } export default Relay.createContainer(Item, { fragments: { store: () => Relay.QL` fragment store on HackerNewsItem { title, score, url, by { id } } `, }, })
export default Relay.createContainer(CategoryPage, { initialVariables: { attributesFilter: getAttributesFromQuery(['count', 'minPrice', 'maxPrice', 'sortBy']), count: parseInt(getFromQuery('count', PAGINATE_BY)) || PAGINATE_BY, minPrice: parseInt(getFromQuery('minPrice')) || null, maxPrice: parseInt(getFromQuery('maxPrice')) || null, sortBy: ensureAllowedName(getFromQuery('sortBy', 'name'), SORT_BY_FIELDS) }, fragments: { category: () => Relay.QL` fragment on CategoryType { pk name url ancestors { name pk url } children { name pk url slug } products ( first: $count, attributes: $attributesFilter, priceGte: $minPrice, priceLte: $maxPrice, orderBy: $sortBy ) { ${ProductList.getFragment('products')} } } ` } });
<AccountDialog role='admin' open={dialogShow} handleClose={this.handleClose} account={select} viewer={this.props.viewer}/> </div> ); } } export default Relay.createContainer(AdminBrowserPage, { ...paginationVariables(), fragments: { viewer: (variables) => Relay.QL` fragment on Viewer { admins(search:$search,first:$first,after:$after) @skip(if: $reverse) { ${AdminList.getFragment('connection')} pageInfo { ${pageInfoFragment} } } admins(search:$search,last:$last,before:$before) @include(if: $reverse) { ${AdminList.getFragment('connection')} pageInfo { ${pageInfoFragment} } } ${AccountDialog.getFragment('viewer')} } ` } });
type="checkbox" /> <ul className="todo-list"> {todoList} </ul> </section> ); } } export default Relay.createContainer(TodoList, { fragments: { todos: () => Relay.QL` fragment on _TodoConnection { count, edges { node { id, complete, ${Todo.getFragment('todo')} } } } `, user: () => Relay.QL` fragment on User { ${Todo.getFragment('user')} } `, }, });
import React from "react"; import Relay from "react-relay"; import Books from "./Books"; class Home extends React.Component { render() { const {bookStore, updateBook} = this.props; return ( <div> <Books bookStore={bookStore} updateBook={updateBook}/> </div> ); } } export default Relay.createContainer(Home, { fragments: { bookStore: () => Relay.QL ` fragment on BookStore{ ${Books.getFragment("bookStore")} } ` } });