https://github.com/sibelius/react-native-relay-example

React Native with Relay Classic example
https://github.com/sibelius/react-native-relay-example

boilerplate react-native relay

Last synced: 19 days ago
JSON representation

React Native with Relay Classic example

• Host: GitHub
• URL: https://github.com/sibelius/react-native-relay-example
• Owner: sibelius
• Created: 2016-11-15T18:47:19.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-26T22:00:16.000Z (about 7 years ago)
• Last Synced: 2024-10-19T19:54:22.300Z (22 days ago)
• Topics: boilerplate, react-native, relay
• Language: JavaScript
• Homepage:
• Size: 143 KB
• Stars: 42
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Deprecation Notice

Use this one instead [ReactNavigationRelayModern](https://github.com/entria/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](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"

    ],

    "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:

```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

            }

          }

        }

      }

    `,

  },

});

```