React中GraphQL带变量的动态搜索栏实现问题排查

我帮你梳理下代码里的几个关键问题，以及优化后的实现方式：

核心问题点 #

• GraphQL 查询定义错误：带变量的查询需要先在query后声明变量，并且要把变量传递给查询字段。你当前的写法没有正确声明变量，也没有将变量传入fuzzyArticleByTitle方法。
• 变量名不匹配：Query组件中传入的变量名是query，但查询里定义的变量是searchString，导致后端无法正确接收参数。
• 数据访问路径错误：查询返回的字段是fuzzyArticleByTitle，你却用data.search访问，而且模糊匹配通常返回数组，不能直接取.title。
• 错误处理变量名错误：throw err中的err未定义，应该使用error。

修正后的类组件代码 #

import React, { Component} from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'

// 修正后的GraphQL查询：声明变量+传递变量到字段
const SearchQuery = gql`
 query FuzzyArticleByTitle($searchString: String!) {
   fuzzyArticleByTitle(searchString: $searchString) {
     title
   }
 }
`;

export default class Search extends Component {
 constructor(props) {
   super(props)
   this.state = { search: '' }
 }

 updateSearch = (e) => {
   this.setState({ search: e.target.value })
 }

 submitSearch = (e) => {
   e.preventDefault()
   console.log(this.state)
 }

 render() {
   const { search } = this.state;
   return (
     <form onSubmit={ this.submitSearch }>
       <input 
         type='text' 
         onChange={ this.updateSearch } 
         value={ search } 
         placeholder='Search' 
       />
       <Query 
         query={SearchQuery} 
         skip={!search} 
         variables={{ searchString: search }} // 修正变量名
       >
         {({loading, error, data}) => {
           if (loading) return <div>Loading...</div>;
           if (error) {
             console.error('查询错误:', error);
             return <div>搜索出错了</div>;
           }
           // 模糊匹配返回数组，遍历渲染
           return (
             <div>
               {data.fuzzyArticleByTitle.map((article, index) => (
                 <h1 key={index}>{article.title}</h1>
               ))}
             </div>
           )
         }}
       </Query>
     </form>
   )
 }
}

更优的函数组件+Hooks实现 #

现在React更推荐使用函数组件结合Hooks，代码更简洁易维护，这里用useState和useQuery重写：

import React, { useState } from 'react'
import { useQuery } from '@apollo/client' // 注意：react-apollo v3+推荐用@apollo/client
import gql from 'graphql-tag'

const SearchQuery = gql`
 query FuzzyArticleByTitle($searchString: String!) {
   fuzzyArticleByTitle(searchString: $searchString) {
     title
   }
 }
`;

export default function Search() {
  const [search, setSearch] = useState('');

  const updateSearch = (e) => {
    setSearch(e.target.value);
  };

  const submitSearch = (e) => {
    e.preventDefault();
    console.log('搜索关键词:', search);
  };

  // 使用useQuery Hook，skip控制是否执行查询
  const { loading, error, data } = useQuery(SearchQuery, {
    skip: !search,
    variables: { searchString: search },
  });

  return (
    <form onSubmit={submitSearch}>
      <input
        type='text'
        onChange={updateSearch}
        value={search}
        placeholder='Search'
      />
      {loading && <div>Loading...</div>}
      {error && <div>搜索出错了：{error.message}</div>}
      {data && data.fuzzyArticleByTitle.length > 0 ? (
        <div>
          {data.fuzzyArticleByTitle.map((article, index) => (
            <h1 key={index}>{article.title}</h1>
          ))}
        </div>
      ) : search && <div>没有找到匹配的文章</div>}
    </form>
  );
}

额外优化建议 #

1. 给列表项添加唯一的key，最好用文章的id而不是索引（如果后端返回id的话）。
2. 可以添加防抖处理，避免输入时频繁发起查询（比如用useDebounce Hook，延迟300ms再执行查询）。
3. 错误提示可以更友好，比如展示具体的错误信息。

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