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")}
}
`
}
});