React中输入变更时如何将e.target.value作为GraphQL查询变量？

核心思路 #

React Hook必须遵守顶层调用规则，useLazyQuery不能嵌套在事件处理器内。正确做法是在组件顶层声明useLazyQuery获取查询执行函数，再在事件处理器中调用该函数并传入最新输入值作为变量。

基础实现代码 #

import { useLazyQuery } from '@apollo/client';
import { getData } from './your-query-file'; // 导入你的GraphQL查询

const YourComponent = () => {
  // 组件顶层调用useLazyQuery，拿到查询执行函数
  const [executeGetData, { loading, data, error }] = useLazyQuery(getData, {
    ssr: false,
    pollInterval: 500 // 按需保留轮询配置
  });

  const handleInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    const email = e.target.value;
    // 直接调用执行函数，传入最新输入值作为变量
    executeGetData({
      variables: { email }
    });
  };

  return (
    <div>
      <input type="email" onChange={handleInputValue} placeholder="输入邮箱" />
      {/* 处理查询状态 */}
      {loading && <p>加载中...</p>}
      {error && <p>查询错误：{error.message}</p>}
      {data && (
        <div>
          <p>用户ID：{data.checkoutProfile.userProfileId}</p>
          <p>绑定邮箱：{data.checkoutProfile.userProfile.email}</p>
        </div>
      )}
    </div>
  );
};

export default YourComponent;

优化：添加输入防抖（避免频繁请求） #

如果需要减少输入过程中的重复查询，可结合防抖逻辑：

import { useLazyQuery, useCallback, useRef, useEffect } from '@apollo/client';
import { getData } from './your-query-file';

const YourComponent = () => {
  const [executeGetData, { loading, data, error }] = useLazyQuery(getData, {
    ssr: false,
  });
  
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const handleInputValue = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const email = e.target.value;
    
    // 清除上一次的定时器
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    
    // 停止输入500ms后再发起查询
    timeoutRef.current = setTimeout(() => {
      executeGetData({ variables: { email } });
    }, 500);
  }, [executeGetData]);

  // 组件卸载时清理定时器
  useEffect(() => {
    return () => timeoutRef.current && clearTimeout(timeoutRef.current);
  }, []);

  // 渲染部分同基础实现
  return (
    // ...
  );
};

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