react-brasil / reactconfbr-app Goto Github PK

View Code? Open in Web Editor NEW

81.0 21.0 14.0 1.52 MB

React Conf BR App built with create-react-native-app

JavaScript 91.38% Python 1.84% Java 1.70% Objective-C 4.71% Shell 0.37%

react reactconf reactconfbr react-native create-react-native-app expo

reactconfbr-app's Introduction

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 or yarn relay:watch are used to convert graphql literals into generated files. The second command watch changes when data/ files are udpated

.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 a StackNavigation
- 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