如何在React-Apollo中将组件state变量传入GraphQL查询？

我来帮你搞定这个问题！把React组件的this.state.search传入GraphQL查询其实没那么复杂，我一步步给你拆解：

第一步：先给你的GraphQL查询定义变量 #

首先要让你的查询支持接收外部变量，在查询文档里用$变量名: 类型的格式声明，然后在查询的参数里使用这个变量。比如：

# 定义名为SearchQuery的查询，接受一个非空字符串类型的searchTerm变量
query SearchQuery($searchTerm: String!) {
  # 假设你的后端查询字段是searchItems，接收term参数，把变量传进去
  searchItems(term: $searchTerm) {
    id
    name
    # 这里是你需要返回的其他字段
  }
}

注意：变量的类型要和后端GraphQL Schema定义的完全一致，比如后端要求非空字符串就写String!，如果是可选的就去掉!。

第二步：在React类组件中关联state和查询 #

根据你使用react-apollo的方式，有两种常用方法：

方法一：用graphql高阶组件 + refetch（推荐新手） #

如果你的组件是用graphql HOC包裹的，可以在state变化时调用refetch方法，把最新的state值作为变量传入：

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

class SearchComponent extends React.Component {
  // 初始化state
  state = {
    search: ''
  };

  // 处理输入变化，更新state后重新查询
  handleSearchInputChange = (e) => {
    const searchTerm = e.target.value;
    this.setState({ search: searchTerm }, () => {
      // state更新完成后，调用refetch传入最新变量
      this.props.data.refetch({ searchTerm });
    });
  };

  render() {
    const { data: { loading, searchItems } } = this.props;
    
    // 加载状态提示
    if (loading) return <div>正在搜索...</div>;

    return (
      <div>
        <input
          type="text"
          value={this.state.search}
          onChange={this.handleSearchInputChange}
          placeholder="输入关键词搜索..."
        />
        {/* 渲染搜索结果 */}
        <ul>
          {searchItems?.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

// 定义查询
const SEARCH_QUERY = gql`
  query SearchQuery($searchTerm: String!) {
    searchItems(term: $searchTerm) {
      id
      name
    }
  }
`;

// 用graphql HOC包裹组件，配置初始变量和查询选项
export default graphql(SEARCH_QUERY, {
  options: {
    // 初始变量可以设为空字符串（根据后端要求调整）
    variables: { searchTerm: '' },
    // 开启这个选项可以让组件感知查询的网络状态变化（比如loading状态）
    notifyOnNetworkStatusChange: true
  }
})(SearchComponent);

方法二：用withApollo手动调用查询（更灵活） #

如果你想更直接地控制查询过程，可以用withApollo高阶组件拿到Apollo Client实例，手动发起查询：

import React from 'react';
import { withApollo } from 'react-apollo';
import gql from 'graphql-tag';

class SearchComponent extends React.Component {
  state = {
    search: '',
    searchResults: [],
    loading: false
  };

  handleSearchInputChange = async (e) => {
    const searchTerm = e.target.value;
    this.setState({ search: searchTerm, loading: true });

    try {
      // 直接调用client的query方法，传入查询和变量
      const response = await this.props.client.query({
        query: SEARCH_QUERY,
        variables: { searchTerm }
      });
      // 更新结果到state
      this.setState({ searchResults: response.data.searchItems, loading: false });
    } catch (error) {
      console.error('搜索出错了:', error);
      this.setState({ loading: false });
    }
  };

  render() {
    const { loading, searchResults } = this.state;
    
    if (loading) return <div>正在搜索...</div>;

    return (
      <div>
        <input
          type="text"
          value={this.state.search}
          onChange={this.handleSearchInputChange}
          placeholder="输入关键词搜索..."
        />
        <ul>
          {searchResults.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

const SEARCH_QUERY = gql`
  query SearchQuery($searchTerm: String!) {
    searchItems(term: $searchTerm) {
      id
      name
    }
  }
`;

// 用withApollo包裹组件，拿到client实例
export default withApollo(SearchComponent);

关键注意点 #

• 变量类型必须和后端Schema匹配，不然会收到GraphQL错误。
• 如果你的搜索需要实时响应输入（比如用户每输入一个字符就查询），可以考虑加防抖处理，避免频繁请求后端。
• 用HOC方式时，确保开启notifyOnNetworkStatusChange: true，这样组件能正确显示loading状态。

内容的提问来源于stack exchange，提问作者peter flanagan