Diagnosing failure after upgrading to v0.8.0 about react-router-relay HOT 19 CLOSED

You're not getting an error or anything?

from react-router-relay.

Nothing :/

from react-router-relay.

Try setting e.g. a breakpoint in RelayRoutingContext.render. Is the route getting properly matched by the router?

from react-router-relay.

How can I verify that? It looks like it's getting a campaignId param, so it's at least partly getting getting matched.

I've got a breakpoint in this function:

  RootComponent.prototype.render = function render() {
    return _react2['default'].createElement(_reactRelay2['default'].RootContainer, _extends({}, this.props, {
      Component: this._routeAggregator,
      renderFailure: this.renderFailure,
      renderFetched: this.renderFetched,
      renderLoading: this.renderLoading,
      route: this._routeAggregator.route
    }));
  };

And this._routeAggregator.route looks like:

{
  "name": "$$_aggregated-$$_route[2]_campaign-$$_route[2]_viewer-$$_route[3]_campaign-$$_route[3]_viewer",
  "queries": {

  },
  "params": {
    "campaignId": "Q2FtcGFpZ246MA=="
  }
}

from react-router-relay.

Check the array of components. Also, what does the React devtool show as actually being rendered?

from react-router-relay.

Also having problems after upgrading to 0.8 :(

There is nothing in the console and React devtools renders 'null' inside StaticContainer.

from react-router-relay.

Try setting a breakpoint in RouteContainer and see why getData is not returning.

from react-router-relay.

@taion The React devtool shows this:

It shows the CampaignList component when it should be Campaign.

Trying to find the array of components and getData now...

from react-router-relay.

New information:

I was initially upgrading from:

"react-relay": "^0.3.2",
"react-router": "^1.0.0",
"react-router-relay": "^0.6.2",

to:

"react-relay": "^0.5.0",
"react-router": "^1.0.0",
"react-router-relay": "^0.8.0",

As an experiment, I tried upgrading to an intermediate step:

"react-relay": "^0.4.0",
"react-router": "^1.0.0",
"react-router-relay": "^0.7.0",

And I found the same bug there. Since I don't see any code changes between v0.6.2 and v0.7.0, it must be a bug in react-relay, right?

from react-router-relay.

Ok, I was able to get it working with [email protected] and [email protected] by upgrading to [email protected].

Unfortunately, I'm still stuck on getting [email protected] and [email protected] to work, even on the latest [email protected].

from react-router-relay.

Do you have a runnable example?

from react-router-relay.

I made one. It seems to be related to switching queries between routes:

https://github.com/tomnod/react-router-relay-issue-76

from react-router-relay.

I tried out your code, it seems that CampaignQueries is broke, If you take out the $campaignId parameter, it should work fine. The correct signature for the query function should be Component and then params. But if you try to stick any arguments in the function the whole thing breaks.

https://github.com/relay-tools/react-router-relay/blob/master/src/RouteAggregator.js#L58

from react-router-relay.

Yup, per @Agrosis, you have the wrong signature for CampaignQueries. It should be either:

    campaign: () => Relay.QL`
        query {
            campaign(id: $campaignId)
        }
    `,

or

    campaign: (Component, params) => Relay.QL`
        query {
            campaign(id: $campaignId) {
                ${Component.getFragment('campaign', params)}
            }
        }
    `,

I had been doing something incorrect with ignoring the signature of the query function. It's not correct to specify a query function with arguments if you're not going to manually compose in the fragment.

from react-router-relay.

Totally fixed it. Thanks for your help @taion and @Agrosis . How do you feel about adding an error so that other people who make the same mistake have an easier time figuring it out? I can implement if you can direct.

Also, how/where did you learn this?

It's not correct to specify a query function with arguments if you're not going to manually compose in the fragment.

from react-router-relay.

I can't - or rather it doesn't really make sense at that level for me to introspect into your query to figure out what it's doing. I'm giving you exactly what you'd get if you passed this query directly into upstream Relay, where it would also break in a similar way.

This is really just the syntax for writing Relay queries - you probably don't want to use the old syntax any more, but it used to be the only syntax before @devknoll added the shorthand.

from react-router-relay.

Yeah, I don't think it was specifically mentioned anywhere, but it's been the documented way since [email protected]. I think since that so closely followed release, it wasn't expected to affect a large number of people.

It looks like facebook/relay@658587e is relaxing the restriction here, which may make this even more confusing 😉

from react-router-relay.

So for reference, this is the query:

    campaign: (campaignId) => Relay.QL`
        query {
            campaign(id: $campaignId)
        }
    `,

I don't believe this is valid under any version of Relay.

Previously we were being sloppy and just dropped all of the arguments entirely, which led to #72 and facebook/relay#585, which I fixed in c1092ed.

from react-router-relay.

Got it.

from react-router-relay.