Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sibelius/ExNavRelay
Example of integrating ex-navigation with Relay
https://github.com/sibelius/ExNavRelay
boilerplate ex-navigation navigation react-native relay
Last synced: 7 days ago
JSON representation
Example of integrating ex-navigation with Relay
- Host: GitHub
- URL: https://github.com/sibelius/ExNavRelay
- Owner: sibelius
- Created: 2016-11-15T19:47:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-15T19:55:04.000Z (about 8 years ago)
- Last Synced: 2024-11-27T07:24:44.766Z (15 days ago)
- Topics: boilerplate, ex-navigation, navigation, react-native, relay
- Language: JavaScript
- Size: 449 KB
- Stars: 25
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - ExNavRelay ★23 - React Native + Ex-navigation + Relay integration template (Components / Navigation)
- Awesome-React-Native-Education - ExNavRelay - navigation with Relay | (Index / Relay)
- awesome-react-native - ExNavRelay ★23 - React Native + Ex-navigation + Relay integration template (Components / Navigation)
- awesome-react-native - ExNavRelay ★23 - React Native + Ex-navigation + Relay integration template (Components / Navigation)
- awesome-react-native - ExNavRelay ★23 - React Native + Ex-navigation + Relay integration template (Components / Navigation)
- awesome-react-native-ui - ExNavRelay ★18 - React Native + Ex-navigation + Relay integration template (Components / Navigation)
README
# React Native + ExNavigation + Relay
This is a sample repository that shows how to integrate React Native with [ExNavigation](https://github.com/exponentjs/ex-navigation) and Relay
It is connecting to this boilerplate code [graphql-dataloader-boilerplate](https://github.com/sibelius/graphql-dataloader-boilerplate)
## Description
- data folder contains schema(.json/.graphql) of your backend graphql server, it will be used by Relay to compile your Relay.QL queries to code.
- plugins folder has babelRelayPlugin configuration, that tells to Relay with schema.json it should use to compile Relay.QL queries
.babelrc for Relay
```json
{
"presets": [
"react-native",
"react-native-stage-0/decorator-support"
],
"plugins": [
"./plugins/babelRelayPlugin"
],
}
```
Obs.: react-native-stage-0/decorator-support is to enable `@withNavigation` needed by ex-navigation
### RelayStore.js
It is a custom Relay.Store that enables you to change your Network Layer. For instance, when you want to set the user token.
- Usage:
```js
RelayStore.reset(
new Relay.DefaultNetworkLayer('http://localhost:5000/graphql')
);
```
### RelayUtils.js
Based on https://gist.github.com/janicduplessis/f513032eb37cdde5d050d9ce8cf0b92a by @janicduplessis
Provides a very handy function to create a Relay.Renderer container to fetch data from Relay
- Usage:
```jsx
import { createRenderer } from './RelayUtils'
export default createRenderer(RelayApp, {
queries: ViewerQuery,
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
users(first: 10) {
edges {
node {
name
}
}
}
}
`,
},
});
```
### Ex-Navigation + Relay
1. You should use `createRenderer` helper in any component that will be `pushed` into a `StackNavigation`
- For instance, check [UserList.js](https://github.com/sibelius/ExNavRelay/blob/master/src/UserList.js)
- Pushing a route that uses Relay and depends on a parameter (https://github.com/sibelius/ExNavRelay/blob/master/src/UserList.js#L85)
- Define that your route will need a parameter from ex-navigation like these (https://github.com/sibelius/ExNavRelay/blob/master/src/UserDetail.js#L34)
- You also need to define it inside `initialVariables` (https://github.com/sibelius/ExNavRelay/blob/master/src/UserDetail.js#L37)