Sub route queries error for react-router-relay

Question

Part of my route is set up like so:

<Route path=":widgetId" component={Widget} queries={{
    viewer: () => Relay.QL`query { viewer }`,
    widget: () => Relay.QL`query { widget(widgetId: $widgetId) }`
}}>
    <Route
        path="details"
        component={Details}
        queries={{ widget: () => Relay.QL`query { widget(widgetId: $widgetId) }` }}
    />
</Route>

However, I get the following error:

Error:  Invariant Violation: Relay(Details).getFragment(): `viewer` is not a valid fragment name. Available fragments names: `widget``.

Is the queries for route :widgetId valid? If I remove viewer from the top level route, everything works.

EDIT: here is the Details Fragment:

export default Relay.createContainer(Details, {
    fragments: {
        widget: () => Relay.QL`
            fragment on Widget {
                id,
            }
        `
    }
});

Edit: here are the Widget Fragments:

export default Relay.createContainer(Details, {
    fragments: {
        widget: () => Relay.QL`
            fragment on Widget {
                id,
            }
        `
        viewer: () => Relay.QL`
            fragment on Viewer {
                id,
            }
        `
    }
});

Note: I am using isomorphic-relay-router

Have you defined fragment viewer in your Widget Relay container? — Ahmad Ferdous
– Ahmad Ferdous, Commented Jun 6, 2016 at 18:57
@AhmadFerdous yes, the fragment viewer is in my Widget Relay container. If I take out the Route with path 'details' I don't get thrown the error. So I believe the error is coming from how queries are set up? — jouerai
– jouerai, Commented Jun 6, 2016 at 19:14
Invariant Violation: Relay(Details).getFragment() <== looks like the problem is with the Details component. Can you add fragments of Relay container Details? — Ahmad Ferdous
– Ahmad Ferdous, Commented Jun 6, 2016 at 22:59
Did you have any luck in the end? I'm running into a nearly identical problem with react-router-relay. — Tim Hope
– Tim Hope, Commented Dec 7, 2016 at 2:55

Jamie S · Accepted Answer · 2016-06-09 10:45:58Z

0

It looks like you need to add a viewer fragment to your Widget class, i.e.:

export default Relay.createContainer(Widget, {
  fragments: {
    widget: () => Relay.QL`
      fragment on Widget {
        id,
      }
    `,
    viewer: () => Relay.QL`
      fragment on ObjectType {
        fields
      }
    `
  }
});

edited Jun 9, 2016 at 10:45

answered Jun 8, 2016 at 12:00

Jamie S

788 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jouerai Over a year ago

Hey @Jamie S, if you check out the comments above, you can see that I do have the viewer fragment in my widget class. The error also points at saying that viewer is not a valid fragment name in the Detail class

Jamie S Over a year ago

I made a mistake in my answer which I noticed is also in your updated question. Not sure if it's a copy paste error but in the Widget code you using the Details class. Otherwise I can't see an issue within the code you've posted. It's pretty much identical to how I set up my routes with react-router-relay

Collectives™ on Stack Overflow

Sub route queries error for react-router-relay

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related