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

Posted 2023-03-08

【中文标题】React Apollo：从组件状态动态更新 GraphQL 查询

【英文标题】：React Apollo: Dynamically update GraphQL query from Component state

【发布时间】：2017-12-02 03:51:32

【问题描述】：

我有一个组件，它使用 react-apollo 装饰器语法显示 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>;
    

单击复选框时，我想重新提交查询，根据复选框的状态动态设置myQuery 中的active 属性。为简洁起见，我省略了复选框的处理程序和绑定，但是如何在状态更改时重新提交查询？

【参考方案1】：

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

此过程在react-apollo docs 部分中有很好的解释： Computing from props

根据您的示例和您的要求，我制作了一个托管在代码沙箱上并使用 GraphQL API 的演示。

演示：https://codesandbox.io/embed/PNnjBPmV2

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);

App.js

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;