1

我正在使用 React/Relay 构建一个简单的新闻聚合器，但我遇到了 Relay Modern 的问题。每当我运行编译器时，它都会生成一个 FeatureRootQuery.graphql.js 文件。但是，它不会为相应的片段生成 FeatureRow_viewer.graphql.js 文件，尽管该片段包含在 FeatureRootQuery.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
        }
      }
    }
  `,
);
4

0 回答 0