entria / reactnavigationrelaymodern Goto Github PK

View Code? Open in Web Editor NEW

173.0 20.0 23.0 847 KB

React Navigation integration with Relay

JavaScript 78.89% Python 5.18% Java 4.27% Objective-C 11.66%

react-navigation relay react-native relay-modern relay-classic

reactnavigationrelaymodern'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 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 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

reactnavigationrelaymodern's People

Contributors

Stargazers

Watchers

Forkers

pillowsoft danielfttorres mortezaalizadeh ronal2do fakenickels vivnau123 ssomnoremac danielhoult brunolemos brunorafael8 nikokoli hyrwork softglance coerick socksrust wahello helielson cs-memorang iq-scm

reactnavigationrelaymodern's Issues

How does one prepare data for SectionList?

I can't resolve how to use RelayModern for RN SectionList. In other words, where do I prepare data like this

  [{name: "Event1", day: "Tuesday"},
  {name: "Event2", day: "Tuesday"},
  {name: "Event3", day: "Wednesday"}, ...]

to look like this:

[{data: [...], key: "Tuesday"},
 {data: [...], key: "Wednesday"},...]

Surely not in the render function. That doesn't seem performant. Isn't this what prepareVariables used to allow for? Where is that functionality in RelayModern?

use @arguments and @argumentsDefinitions

In your demo app where and how should I do Remote server initialization. In previous Relay there was a call in react-relay for this: Relay.injectNetworkLayer. Can you please provide example with remote server configuration.

ReactConfBR ticket

Who sends the pull request first to close this itens, will win a ticket for ReactConfBR(http://reactconfbr.com.br/)

create an UserRow
use a createFragmentContainer to define UserRow requirements
create createQueryRenderer utils (based on this https://github.com/entria/relay-utils)

[refactor] create an UserRow

create an UserRow
use a createFragmentContainer to define UserRow requirements

Does "Relay Modern" change anything?

I know relay modern is backwards-compatible ... just asking if new things are possible?

create a Drawer menu to move through screens

Relay Classic Branch

Keep a Relay classic version in other branch

[suggestion] Add `RefetchContainer`, directives like `@include` or `@skip`, mutations.

remove Viewer

depends on https://github.com/entria/graphql-dataloader-boilerplate/issues/46

Use RelayModernUtils.js

https://gist.github.com/sibelius/3903ba60e3c162258119a49073366313

Undefined method commitUpdate() on RelayStore

When I try to access commitUpdate() method using this.props.relay.commitUpdate(), this is undefined on RelayStore.js#93 because this._env not exists.

Add tests

Web App compatibility?

Awesome work here! Will this setup work as a regular web app as well or would changes be required? For example, would something like this be required? https://github.com/react-community/react-navigation/tree/master/website. Would be great to see a website version of ReactNavigationRelayModern. I randomly stumbled upon react-navigation today but now I'm thinking it might be the way to go. I'm currently transitioning an enormous web app from relay classic to relay modern. Here is the relay classic version of what I and one other teammate built for this company. https://beta.onehopewine.com/shop/wine/wine Would love to get rid of react-relay-router in lieu of react-navigation but I'm a little confused as to how to go about doing this. I need to be able to make use of PaginatioContainers and RefetchContainers just as you have done. Any thoughts, ideas would be much appreciated. Thanks.

static navigationOptions ignored at component level

in other words, this doesn't work for me:

  static navigationOptions = {
    title: 'UserList',
  };

Was this ever working for anyone else? Works if set at navigator level.