React-native-router-flux: Is Relay supported?

[joonhocho]

Does/will react-native-router-flux support Relay?
Relay now supports react-native as you can see from the official example.
https://github.com/facebook/relay/tree/master/examples/TodoMVC
I'm wondering if react-native-router-flux has any plans to support Relay if not already supported.
If it is already supported, it would be very helpful to have an example.
I will be exploring on this topic. Meanwhile, any help/advice will be very welcomed!

[aksonov]

I don't have time to do example but as i remember someone used it without any problem - just wrap Router by Relay component...

[joonhocho]

Thanks. Once I figure it out, I will make a PR.

[ugputu18]

There is an easy way, yet not most optimal. See the sample on typescript.

export function relay(Component: Relay.RelayContainerClass<any>, queries: any, params?: any): React.ComponentClass<any> {

  return class RelayRootContainer extends React.Component<void, void> {
    private routedComponent: any = null
    private params: any = {}

    constructor(props: any, context?: any) {
      super(props, context)
      class Routed extends React.Component<void, void> {
        render(): JSX.Element {
          return <Component {...props} {...this.props}/>
        }
      }
      this.routedComponent = hoistStatics(Routed, Component)

      // Prepare queries params
      if (queries.params) {
        Object.assign(this.params, queries.params, _.pick(props, Object.keys(queries.params)))
      }
      if (params) {
        Object.assign(this.params, params)
      }
    }

    render(): JSX.Element {
      const route = {
        name: ['$$_aggregated', ...Object.keys(queries)].join('-'),
        queries: _.omit(queries, ['params']),
        params: this.params,
      }
      return <Relay.RootContainer Component={this.routedComponent} route={route}/>
    }
  }
}

And then in routes:
<Scene component={relay(SampleScreen, viewer)}/>

[aksonov]

Why just not

   <Relay>
         <Router><Scene>...</Scene></Router>
   </Relay>

On 01 Apr 2016, at 11:14, ugputu18 [email protected] wrote:

There is an easy way, yet not most optimal. See the sample on typescript.

export function relay(Component: Relay.RelayContainerClass, queries: any, params?: any): React.ComponentClass {

return class RelayRootContainer extends React.Component {
private routedComponent: any = null
private params: any = {}

constructor(props: any, context?: any) {
  super(props, context)
  class Routed extends React.Component<void, void> {
    render(): JSX.Element {
      return <Component {...props} {...this.props}/>
    }
  }
  this.routedComponent = hoistStatics(Routed, Component)

  // Prepare queries params
  if (queries.params) {
    Object.assign(this.params, queries.params, _.pick(props, Object.keys(queries.params)))
  }
  if (params) {
    Object.assign(this.params, params)
  }
}

render(): JSX.Element {
  const route = {
    name: ['$$_aggregated', ...Object.keys(queries)].join('-'),
    queries: _.omit(queries, ['params']),
    params: this.params,
  }
  return <Relay.RootContainer Component={this.routedComponent} route={route}/>
}

}
}
And then in routes:

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/437#issuecomment-204323250

[r0b1n]

@aksonov I may try to achieve this as a OOB feature.

I would like to suggest something like this:
Inspired by react-router-relay

const ViewerQueries = {
  viewer: () => Relay.QL`query { viewer }`
};

<Router createReducer={reducerCreate}>
  <Scene key="modal" component={Modal} >
    <Scene key="root" hideNavBar={true}>
      <Scene key="echo" clone component={EchoView} />
      <Scene key="register" component={Register} title="Register" />
      <RelayScene // or even just Scene
        key="relay"
        queries={ViewerQueries} // queries needed for relay component
        component={RelayBasedScene}
        title="RelayScene"
      />
    </Scene>
    <Scene key="error" component={Error}/>
  </Scene>
</Router>

And as I see we can extend DefaultRenderer here to render Relay components.

Does it work for you?

[rgovindji]

@r0b1n I would really appreciate this feature, since my app will over fetch data if I simply wrap the router in a Relay component.

[sibelius]

@r0b1n @joonhocho @ugputu18 could u guys share an example repo please?

[r0b1n]

@sibeliusseraphini can't provide any usable examples now, I was just experimenting with relay rendering.
Check: https://github.com/aksonov/react-native-router-flux/compare/master...r0b1n:relay-integration
You may slightly change the way RelayComponentRenderer.js handle params and wrap your Scene component with it, then feed it to <Scene component={RelayComponentRendererWrappedScene} .../>
Maybe I will implement some examples later.

P.S. Router itself needs to have ability to intercept rendering, just like react-router did. And then we can setup relay renderer to it without changing the code.

[rturk]

@sibeliusseraphini this seems to work
https://github.com/codefoundries/UniversalRelayBoilerplate/blob/master/app/app.js

[sibelius]

@rturk I think this solution does not integrate seamless with this package, I think @r0b1n solution is the best one based on react-router-relay

[chrissm79]

@r0b1n Are we able to use RNRF's wrapBy?

(Example w/ MobX's observer) https://github.com/aksonov/react-native-mobx/blob/master/index.js

[aksonov]

Yes, it works!

Pavel.

27 мая 2016 г., в 17:29, Christopher Moore [email protected] написал(а):

Are we able to use RNRF's wrapBy?

(Example w/ MobX's observer) https://github.com/aksonov/react-native-mobx/blob/master/index.js

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[chrissm79]

Tinkering around w/ @r0b1n solution and wrapBy, and if I get it working I'll post it here. Does anyone have an example they could share?

[r0b1n]

Hi guys, here is my example. https://github.com/r0b1n/rnrf-relay-example
Please check if it works for you.
// cc @chrissm79 @sibeliusseraphini

P.s. tested on iOS only.

[sibelius]

great job @r0b1n it works great.

@aksonov I think @r0b1n should submit a PR to add this info to the docs and this example as well, as Relay is getting more main stream now

[chrissm79]

Just a note for anyone using Action.create to generate scenes, the api changed a bit. You need to move wrapBy from the <Router> to the Actions.create function as a second parameter like so:

const scenes = Actions.create(
  <Scene key="root">
    <Scene
      key="page1"
      title="PageOne"
      component={PageOne}
      queries={{ viewer: () => Relay.QL`query { viewer }` }}
    />
    {/* ... */}
  </Scene>,
  RelayComponentRenderer // This is necessary otherwise you will encoutner a Relay context error
);

[aksonov]

Router could create actions for you if you put scenes as children

Pavel.

31 мая 2016 г., в 20:43, Christopher Moore [email protected] написал(а):

Just a note for anyone using Action.create to generate scenes, the api changed a bit. You need to move wrapBy from the to the Actions.create function as a second parameter like so:

const scenes = Actions.create(

key="page1"
title="PageOne"
component={PageOne}
queries={{ viewer: () => Relay.QLquery { viewer } }}
/>
{/* ... */}
,
RelayComponentRenderer // This is necessary otherwise you will encoutner a Relay context error
);
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[proProbe]

Sorry for reusing this issue. Im having troubles with tabbar-scenes not rendering when the relaystore updates. If I in tab1 sends an update and changes the store which tab2 is dependent on, nothing happens in tab2. ComponentWillReceiveProps does not trigger. Even by Actions.refresh(), the relaystore does not send its newly updated information to tab2