Comments (19)
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.
Related Issues (20)
- [react-router] The middleware specified at index 0 does not appear to be a valid React Router middleware HOT 1
- GraphQL error gets stuck in parent route HOT 11
- PrepareParams per-component basis? HOT 2
- Single-Page App Sharing Variables / Single Query HOT 1
- query params routing HOT 1
- Fetch completes but doesn't cause a refresh when navigating through link (fine during refresh) HOT 4
- arguments of type GraphQLList are sent in two separate requests and doesnt work HOT 1
- How do I access the relay environment? HOT 1
- Supporting react-router 4.0 HOT 1
- How to handle "Object not found" cases? HOT 1
- Module not found: 'react-router/lib/getRouteParams' HOT 1
- Named components readyState change at same time even if queries not finished together HOT 2
- Compatible with React-Router latest version(4.x). HOT 1
- Go to url based on data recieved from Relay? HOT 1
- Use with react-router 4.0.0 HOT 5
- Incompatible With React-Router V4
- Make Compatible with Relay 2 HOT 20
- is this even possible ? HOT 1
- React 16 Compatability HOT 1
- Back via Browser History with state persisting? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-router-relay.