如何基于Relay实现表单输入值服务端存在性校验的最优方案

该方案完全规避你遇到的两类问题，不需要处理Hook调用限制，也不会触发组件整体重渲染导致输入框消失，适配当前表单校验场景的需求。

实现步骤 #

• 首先定义你的唯一性校验GraphQL查询，示例如下：

query UsernameUniqCheckQuery($input: String!) {
  isValueTaken(input: $input)
}

• 组件内部实现逻辑：

1. 引入Relay环境实例和fetchQuery API，声明三个状态：输入值value、校验中状态checking、是否已占用isTaken
2. 给输入框绑定onChange事件，添加防抖处理（推荐300ms，避免频繁发起无效请求）
3. 当输入值长度≥4时，调用fetchQuery发起校验请求，请求结束后更新isTaken状态
4. 提交按钮的禁用条件设置为：value.length < 4 || checking || isTaken

• 示例代码片段：

import { useState, useMemo } from 'react';
import { fetchQuery } from 'react-relay';
import { debounce } from 'lodash';
import relayEnv from '你的Relay环境实例路径';
import UsernameUniqCheckQuery from './__generated__/UsernameUniqCheckQuery.graphql';

function UniqCheckForm() {
  const [value, setValue] = useState('');
  const [isTaken, setIsTaken] = useState(false);
  const [checking, setChecking] = useState(false);

  // 防抖校验函数，避免频繁触发请求
  const debouncedCheck = useMemo(
    () => debounce(async (inputVal) => {
      setChecking(true);
      try {
        const data = await fetchQuery(
          relayEnv,
          UsernameUniqCheckQuery,
          { input: inputVal }
        ).toPromise();
        setIsTaken(data.isValueTaken);
      } catch (e) {
        // 错误场景可自行定制处理逻辑，示例默认禁用提交按钮
        setIsTaken(true);
      } finally {
        setChecking(false);
      }
    }, 300),
    []
  );

  const handleChange = (e) => {
    const newVal = e.target.value;
    setValue(newVal);
    setIsTaken(false);
    // 输入长度不足时直接跳过校验
    if (newVal.length < 4) return;
    debouncedCheck(newVal);
  };

  const isSubmitDisabled = value.length < 4 || checking || isTaken;

  return (
    <div>
      <input value={value} onChange={handleChange} />
      <button disabled={isSubmitDisabled} type="submit">提交</button>
    </div>
  );
}

如果你的业务需要缓存校验结果减少重复请求，可以采用该方案：

• 用useQueryLoader获取查询加载器，只有当输入长度≥4时才调用loadQuery触发请求
• 把usePreloadedQuery的调用拆到独立子组件，父组件仅当queryRef存在时才渲染子组件，避免Hook条件调用报错
• 子组件外层的Suspense fallback设置为null即可，不会触发主组件消失

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