Javascript React Apollo：从组件状态动态更新GraphQL查询

我有一个组件，它使用

react apollo

decorator语法显示GraphQL查询的结果。查询接受一个参数，我希望根据组件状态动态设置该参数

考虑以下简化示例：

import * as React from ‘react’;
import { graphql } from ‘react-apollo’;
import gql from ‘graphql-tag’;

const myQuery = gql`
    query($active: boolean!) {
        items(active: $active) {

        }
    }
`;

@graphql(myQuery)
class MyQueryResultComponent extends React.Component {
    public render() {
        return <div>
            <input type=“checkbox” /* other attributes and bindings */ />
            {this.props.data.items}
        <div>;
    }
}

import*as React from'React'；
从'react apollo'导入{graphql}；
从“graphql标签”导入gql；
常量myQuery=gql`
查询（$active:boolean！）{
项目（活动：$活动）{
}
}
`;
@graphql（myQuery）
类MyQueryResultComponent扩展了React.Component{
公共渲染（）{
返回
{this.props.data.items}
;
}
}

---

单击复选框后，我想重新提交查询，根据复选框的状态动态设置

myQuery

中的

active

属性。为简洁起见，我省略了复选框的处理程序和绑定，但如何在状态更改时重新提交查询？

创建一个新组件，该组件将从父组件传递

属性
活动

本程序在以下章节的
react apollo
文档中有很好的解释：

基于您的示例和需求，我制作了一个演示，它托管在codesandbox上，并使用GraphQLAPI

演示：
Data.js

import React from 'react';
import PropTypes from 'prop-types';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const Data = ({ data }) =>
  <div>
    <h2>Data</h2>
    <pre style={{ textAlign: 'left' }}>
      {JSON.stringify(data, undefined, 2)}
    </pre>
  </div>;

Data.propTypes = {
  active: PropTypes.bool.isRequired,
};

const query = gql`
  query SearchAuthor($id: Int!) {
    author(id: $id) {
      id
      firstName
      lastName
    }
  }
`;

export default graphql(query, {
  options(ownProps) {
    return {
      variables: {
        // This is the place where you can 
        // access your component's props and provide
        // variables for your query
        id: ownProps.active ? 1 : 2,
      },
    };
  },
})(Data);

import React, { Component } from 'react';
import Data from './Data';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false,
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.setState(prevState => ({
      active: !prevState.active,
    }));
  }

  render() {
    const { active } = this.state;

    return (
      <div>
        <h1>App</h1>
        <div>
          <label>
            <input
              type="checkbox"
              checked={active}
              onChange={this.handleChange}
            />
            If selected, fetch author <strong>id: 1</strong>
          </label>
        </div>
        <Data active={active} />
      </div>
    );
  }
}

export default App;