ReactNavigationRelayModern
ReactNavigationRelayModern copied to clipboard
React Navigation integration with Relay
React Native + React-Navigation + Relay Modern
This is a sample repository that shows how to integrate React Native with ReactNavigation and Relay Modern.
For the Relay-Classic Version see this branch
It is connecting to this boilerplate code graphql-dataloader-boilerplate
Description
-
data/
contains schema(.json/.graphql) of your GraphQL server. It will be used by Relay to compile your graphql queries to code -
yarn relay
oryarn relay:watch
are used to convert graphql literals into generated files. The second command watch changes whendata/
files are updated
.babelrc
for Relay Modern
{
"plugins": [
["relay", {"schema": "data/schema.json"}]
],
}
Relay Environment
The file src/createRelayEnvironment.js creates a Relay Environment and a Network instance that configures Relay with a function to fetch queries from the remote server
ReactNavigation + Relay Modern
- You should use a Relay Container such as FragmentContainer, PaginationContainer or others in any component that will be
pushed
into aStackNavigation
- For instance, check UserList#createPaginationContainer
-
Pushing a route that uses Relay and depends on a parameter UserList#navigate
-
Define that your route will need a parameter from react-navigation like these UserDetail#query
-
You also need to define it inside
variables
UserDetail#variables