我正在使用React / Relay构建一个简单的新闻聚合器,我遇到了Relay Modern的问题。每当我运行编译器时,它都会生成一个FeatureRootQuery.graphql.js文件。但是,尽管该片段包含在FeatureRootQuery.graphql.js文件中,但它不会为相应的片段生成FeatureRow_viewer.graphql.js文件。 react应用程序无法编译,因为它无法找到该文件。有谁知道这可能导致什么?
FeatureRoot.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
QueryRenderer,
graphql
} from 'react-relay';
import environment from '../Environment.js';
import FeatureRow from './FeatureRow';
class FeatureRoot extends Component {
render() {
const level = this.props.active;
return (
<QueryRenderer
environment={environment}
query={graphql`
query FeatureRootQuery {
...FeatureRow_viewer
}
`}
render={({error, props}) => {
if (error) {
return (<div>{error.message}</div>);
} else if (props) {
return (<FeatureRow viewer={props} level={level}/>)
}
return (<div>Loading</div>);
}}
/>
)
}
}
function mapStateToProps(state) {
return { active: state.level.active }
}
export default connect(mapStateToProps, null)(FeatureRoot);
FeatureRow.js
import React, { Component } from 'react';
import FeatureCarousel from './FeatureCarousel';
import FeatureList from './FeatureList';
import ReactDOM from 'react-dom';
import {
createFragmentContainer,
graphql
} from 'react-relay';
import '../styles/FeatureRow.css';
class FeatureRow extends Component {
constructor() {
super();
this.state = {
carouselImgHeight: 0,
carouselTextHeight: 175,
carouselHeight: 0
};
this.updateHeight = this.updateHeight.bind(this);
}
componentDidMount() {
this.updateHeight();
}
updateHeight() {
...
}
componentWillMount() {
window.addEventListener("resize", this.updateHeight);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateHeight);
}
render() {
let carouselArticles = this.props.viewer.sources[0].articles;
let { level } = this.props;
let { carouselHeight } = this.state;
return (
<div id="feature-row">
<div className="row">
<div className="col-sm-6 col-carousel">
<FeatureCarousel
level={level}
articles={carouselArticles}
/>
</div>
<div className="col-sm-6 col-list">
<FeatureList
articles={carouselArticles}
carouselHeight={carouselHeight}
/>
</div>
</div>
</div>
)
}
}
export default createFragmentContainer(
FeatureRow,
graphql`
fragment FeatureRow_viewer on Query {
sources(
filter: {
names: ["The New York Times", "The Washington Post", "The Wall Street Journal", "USA Today", "Associated Press", "Reuters"]
}
) {
id
name
articles {
id
author
title
description
url
urlToImage
publishedAt
}
}
}
`,
);