Getting React Native's Navigator and Relay to work together

[ericallam]

Code and the comment below included in this Gist

I'm having trouble figuring out how to get Relay + React Native's navigator component to work together. This uses navigator to show a list of "Matchdays" related to the current season of Premier League football. When the user taps on a matchday item, I want to navigate them to a list of Matches related to that single matchday. As you can see in MatchdayList.handleItemPress I'm using navigator.push to navigate to the MatchList, and passing in the single matchday in the route as is the practice with React Native's navigator.

The problem is when the MatchList is rendered, Relay displays the warning:

RelayContainer: Expected prop `matchday` to be supplied to `MatchList`, but got `undefined`. Pass an explicit `null` if this is intentional.

If I update the App.renderScene method to pass in the matchday as a prop to the component, I get a similar but different warning:

Expected prop `matchday` supplied to `MatchList` to be data fetched by Relay. This is likely an error unless you are purposely passing in mock data that conforms to the shape of this component's fragment.

The problem seems to be that in Relay's model, MatchList should be a child to MatchdayItem? That way it would be able to resolve the GraphQL query to next the MatchList fragment inside the single Matchday record?

But with Navigator, when MatchList is pushed into the stack, it replaces the existing MatchdayList component, leaving Relay confused as to the hierarchy of the components and thus the GraphQL structure it needs to build.

Are there any facilities in Relay to fix this problem? Like, for example, a way to specify the Relay context for the MatchList component, so Relay can tell that is should be nested inside a single Matchday item?

[josephsavona]

Thanks for such a well-documented issue. I noticed that the gist doesn't appear to make use of RealayRootContaineror any "query configs" (RelayRoute) - this is required at the top of a Relay component tree in order to ensure that data is fetched for all the components in the tree. It also passes the correct props to the top component.

Generally with RN Navigators you would have one RelayRootContainer & route per distinct screen in the app (one for the outer list, one for the item page). Does this help?

[ericallam]

@josephsavona thanks for the response! You are right, I was missing the RootContainer and the Route at the top of the component tree, I just forgot to include them in the gist (I've updated the gist to include these files now).

I've followed your advice and have Relay + RN Navigators working! I've updated the Gist I linked to above in case anyone is curious how how I got it to work.

[josephsavona]

@ericallam Great, glad that helped. Thanks for the follow-up - i'll go ahead and close the issue but will share the gist.