React Native with Relay Classic example
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ first version Nov 15, 2016
android first version Nov 15, 2016
data first version Nov 15, 2016
ios first version Nov 15, 2016
plugins first version Nov 15, 2016
src first version Nov 15, 2016
.babelrc first version Nov 15, 2016
.buckconfig first version Nov 15, 2016
.eslintrc first version Nov 15, 2016
.flowconfig first version Nov 15, 2016
.gitignore first version Nov 15, 2016
.watchmanconfig first version Nov 15, 2016
README.md use https://github.com/entria/ReactNavigationRelayModern Oct 26, 2017
index.android.js first version Nov 15, 2016
index.ios.js first version Nov 15, 2016
main.js add exponent main file, fix #1 Feb 5, 2017
package.json first version Nov 15, 2016
yarn.lock first version Nov 15, 2016

README.md

Deprecation Notice

Use this one instead ReactNavigationRelayModern

React Native + Relay

This is a sample repository that shows how to integrate React Native with Relay

It is connecting to this boilerplate code 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

{
    "presets": [
        "react-native"
    ],
    "plugins": [
        "./plugins/babelRelayPlugin"
    ],
}

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:
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:
import { createRenderer } from './RelayUtils'
export default createRenderer(RelayApp, {
  queries: ViewerQuery,
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        users(first: 10) {
          edges {
            node {
              name
            }
          }
        }
      }
    `,
  },
});