如何使用Relay和graphql在同一页面上运行多个查询？

Question

我正在尝试从同一中继页面运行多个独立查询，但是我无法使其正常运行。我必须在将道具（从查询渲染器解析）传递给父组件然后传递给子组件的同时，在子组件中运行片段查询。下面是我的QueryRenderer代码：

import React from "react";
import { graphql, QueryRenderer } from "react-relay";
import environment from "../config/network";
import ProductPerformance from "../component/ProductPerformance";
import moment from "moment";

let ProductPerformancePageQuery = graphql`
  query ProductPerformancePageQuery(
    $first: Int
    $from: String
    $to: String
    $count: Int
    $offset: Int
    $searchTerm: String
    $filteredEntity: String
    $rating: String
    $searchCustomer: String
  ) {
    ...ProductPerformance_query
    ...customerSearch_chatCustomers
  }
`;
class ProductPerformancePage extends React.Component {
  render() {
    return (
      <div>
        <div className="container">
          <QueryRenderer
            environment={environment}
            query={ProductPerformancePageQuery}
            variables={{
              from: moment(
                new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
              ).format("YYYY-MM-DD 00:00:00"),
              to: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
              count: 3,
              offset: 0,
              searchTerm: null,
              filteredEntity: null,
              rating: "NEGATIVE",
              searchCustomer: null
            }}
            render={({ error, props }) => {
              if (error) {
                return <div>{error}</div>;
              }
              if (!props) {
                return <div>Loading.....</div>;
              }
              return <ProductPerformance query={props} chatCustomers={props} />;
            }}
          />
        </div>
      </div>
    );
  }
}

export default ProductPerformancePage;

父组件的渲染函数和graphql片段： （是该父组件的子组件，最终我需要上面查询渲染器提供的道具。）

render() {
    console.log("SEE HEREEE customers", this.props.chatCustomers);
    console.log("SEE HEREEE ", this.props.query);


    return (
      <div>
        <h1>Product Performance</h1>
        <Container>
          <Row>
            <Col>
              <FormGroup>
                <label>Search Term:</label>
                <Input
                  type="text"
                  name="search"
                  placeholder="Search Term"
                  value={this.state.searchTerm}
                  onChange={e => this.setState({ searchTerm: e.target.value })}
                  onKeyUp={event => this.handleEnter(event)}
                />
              </FormGroup>
            </Col>
            <CustomerSearch chatCustomers={this.props.chatCustomers} />
          </Row>
        </Container>
      </div>
    );
  }
}

module.exports = createRefetchContainer(
  ProductPerformance,
  graphql`
    fragment ProductPerformance_query on Query {
      ratedEntities(
        first: $first
        from: $from
        to: $to
        count: $count
        offset: $offset
        searchTerm: $searchTerm
        filteredEntity: $filteredEntity
        rating: $rating
      ) @connection(key: "ProductPerformance_ratedEntities") {
        edges {
          node {
            entity
            negative
            positive
            mixed
            neutral
          }
          cursor
        }
        totalCount
        pageInfo {
          endCursor
          startCursor
        }
      }
    }
  `,
  graphql`
    query ProductPerformanceQuery(
      $first: Int
      $from: String
      $to: String
      $count: Int
      $offset: Int
      $searchTerm: String
      $filteredEntity: String
      $rating: String
    ) {
      ...ProductPerformance_query
    }
  `
);

子组件（客户搜索）：

import React, { Component } from "react";
import { createFragmentContainer, graphql } from "react-relay";
import { Col, FormGroup } from "reactstrap";

class CustomerSearch extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      uName: ""
    };
  }
  render() {
    return (
      <div>
        <Col>
          <FormGroup>
            <label>Customers:</label>
            <select
              className="form-control t2mselectlist"
              type="select"
              name="Customer Search"
              value={this.state.customer}
              onChange={this.onCustomerSelect}
            >
              //map for dropdown options
              <option value="NEGATIVE">Negative</option>
            </select>
          </FormGroup>
        </Col>
      </div>
    );
  }
}

module.exports = createFragmentContainer(
  CustomerSearch,
  graphql`
    fragment customerSearch_chatCustomers on Query {
      chatCustomers(searchCustomer: $searchCustomer) {
        edges {
          node {
            customer_name
            customer_email
          }
        }
      }
    }
  `
);