Skip to content

Instantly share code, notes, and snippets.

@kikoseijo
Last active February 25, 2018 21:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kikoseijo/cc91f7cab30e51e53bb7e2ee479a7799 to your computer and use it in GitHub Desktop.
Save kikoseijo/cc91f7cab30e51e53bb7e2ee479a7799 to your computer and use it in GitHub Desktop.
React Relay Modern QueryRenderer + PaginationController.
// @flow
import * as React from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { QueryRenderer, graphql } from 'react-relay';
import type {
NavigationScreenProp,
NavigationRoute,
NavigationContainer
} from 'react-navigation';
import RelayEnv from './../../graphql/Environment';
import NewsList from './containers/NewsList';
import Constants from '../../libs/constants';
type Props = {
navigation: NavigationScreenProp<NavigationRoute>
};
export default class NewsHome extends React.Component<Props> {
render() {
return (
<QueryRenderer
environment={RelayEnv.environment}
variables={{ count: Constants.NEWS_ITEMS_PER_PAGE, after: '' }}
query={graphql`
query newsHomeQuery($count: Int!, $after: ID) {
viewer {
...NewsList_viewer
}
}
`}
render={({ error, props, retry }) => {
if (props) {
return <NewsList {...props} navigation={this.props.navigation} />;
}
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<ActivityIndicator size="large" />
</View>
);
}}
/>
);
}
}
export default createPaginationContainer(
NewsList,
{
viewer: graphql`
fragment NewsList_viewer on User {
news(first: $count, after: $after) @connection(key: "NewsList_news") {
edges {
node {
id
...NewsItem_item
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`
},
{
direction: 'forward',
getConnectionFromProps(props) {
return props.viewer && props.viewer.news;
},
// This is also the default implementation of `getFragmentVariables` if it isn't provided.
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount
};
},
getVariables(props, paginationInfo, fragmentVariables) {
return {
count: paginationInfo.count,
after: paginationInfo.cursor
};
},
query: graphql`
query NewsListForwardQuery($count: Int!, $after: ID) {
viewer {
...NewsList_viewer
}
}
`
}
);
@kikoseijo
Copy link
Author

Bear in mind, viewer its the current logged in user, and so, im quering post that belongs to the current logged in user.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment