Passing variables to containers from route/query root

[taion]

Let's say I have a client side route like /widgets?color={color}. Correspondingly, I want a query that looks like

query {
  viewer {
    widgets(color: $color first: 10) {
      ...widgetFields
    }
  }
}

After some stumbling, it seems like the best way to do this is something like:

WidgetListView = Relay.createContainer(WidgetListView, {
  initialVariables: {
    color: null
  },

  fragments: {
    viewer: () => Relay.QL`
      widgets(color: $color first: 10) {
        ${WidgetList.getFragment('widgets')}
      }
    `
  }
});

class WidgetListRoute extends Relay.Route {
  static routeName = 'WidgetListRoute';

  static routeParams = {
    color: {}
  };

  static queries = {
    viewer: (Component, {color}) => Relay.QL`
      query {
        viewer {
          ${Component.getFragment('viewer', {color})}
        }
      }
    `
  }
}

class WidgetListApp extends React.Component {
  render() {
    return (
      <Relay.RootContainer
        Component={WidgetListView}
        route={new WidgetListRoute({color: this.props.color})}
      />
    );
  }
}

Is this indeed the correct approach, or am I horribly abusing undocumented features?

[taion]

I imagine all will be made clear once the todo example gets fleshed out, but this was just one of the first things I hit in trying to do a quick Relay-based PoC, so wanted to see how far I was from the right track.

[cpojer]

Yes this seems correct.

[taion]

Cool, just wanted to make sure I wasn't abusing private APIs. Thanks!

[devknoll]

@taion Found this too: https://facebook.github.io/relay/docs/api-reference-relay-mutation.html#getfragment-static-method so I guess that makes it official? 😉