WooCommerce GraphQL registerUser 偶发注册失败问题排查

该问题不是WooCommerce GraphQL内置防垃圾注册限流机制导致，属于前端gqty客户端缓存、Mutation状态复用、表单逻辑编写不规范共同引发的bug，和控制台抛出的[gqty] Warning! No data requested.警告直接对应。

补充说明：WooCommerce GraphQL默认注册限流触发时会返回明确的429错误响应，附带"Too many requests"提示，不会出现日志显示请求成功但注册不生效的情况，且限流限制不会因为刷新页面直接解除，因此可以直接排除限流因素。

具体代码缺陷 #

• Mutation返回值写法不符合gqty规则：gqty基于代理自动生成查询语句，原代码直接return result.user没有显式声明需要返回的用户具体字段，第一次请求时代理还能通过后续console.log(data)的读取操作补全字段，第二次请求时因为上一次返回的用户数据存在缓存，代理无法触发新的字段捕获，不会向后端发起有效注册请求，直接返回空值，对应抛出"No data requested"警告。
• 表单重置逻辑触发时机错误：原代码将表单清空逻辑放在依赖data的useEffect中，第一次注册成功后data被赋值为返回的用户对象，表单被清空，但useMutation返回的data状态不会自动重置，第二次触发注册时，新旧状态混杂会导致gqty判断请求无更新，直接走缓存返回。
• 表单事件绑定不规范：原代码将提交逻辑绑定在按钮的onClick事件上，没有绑定到form的原生onSubmit事件，快速操作时容易出现事件重复触发、状态不同步问题。
• 低级笔误：密码输入框的type属性错写为text，会导致密码输入时明文显示。

修复方案 #

修正状态逻辑代码 #

const [username, setUsername] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')

// 从useMutation返回值中取出reset方法，用于每次提交前重置上一次请求状态
const [registerUser, { data, error, isLoading, reset }] = client.useMutation((mutation, args: FormData) => {
    const result = mutation.registerUser({
        input: args,
    })
    // 显式声明需要返回的用户字段，让gqty正确生成查询语句，避免代理捕获失效
    return {
        user: {
            id: result.user?.id,
            username: result.user?.username,
            email: result.user?.email
        }
    }
})

const handleSubmit = async (event) => {
    event.preventDefault()
    // 提交前先重置上一次mutation的状态和缓存
    reset()
    try {
        const response = await registerUser({
            args: {
                username,
                email,
                password,
            },
        })
        console.log('response:', response)
        // 注册成功后再清空表单，移除原来依赖data的useEffect
        setUsername('')
        setEmail('')
        setPassword('')
    } catch (err) {
        console.log('error:', err)
    }
}

// 移除原代码中依赖data清空表单的useEffect，避免异常触发

修正JSX渲染代码 #

return (
    <div className="ps-page--default">
        {/* 将提交事件绑定到form的onSubmit上，不要绑定在按钮onClick */}
        <form className="ps-form--auth" id="register__tab" onSubmit={handleSubmit}>
            <div className="ps-tabs">
                <div id="tab-2">
                    <div className="form-group form-group--space">
                        <input
                            className="form-control"
                            name="username"
                            id="register__tab--username"
                            type="text"
                            placeholder="What should we call you ?"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                        />
                    </div>
                    <div className="form-group form-group--space">
                        <input
                            className="form-control"
                            name="email"
                            id="register__tab--email"
                            type="email"
                            placeholder="Enter your email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>
                    <div className="form-group form-group--space">
                        <input
                            className="form-control"
                            name="password"
                            id="register__tab--password"
                            // 修正密码框type为password
                            type="password"
                            placeholder="Create a password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <div className="ps-form__desc">
                        <p>Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.
                        </p>
                    </div>
                    <div className="form-group submit">
                        <button type="submit" className="ps-btn ps-btn--fullwidth ps-btn--black" disabled={isLoading}>
                            {isLoading ? 'Signing up...' : 'Sign up'}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
)

修复后效果 #

• 控制台不再抛出[gqty] Warning! No data requested.警告，每次提交都会向后端发起真实有效的注册请求
• 无需等待或刷新页面，连续提交不同账号的注册请求均可正常处理
• 密码输入时默认密文显示，符合表单交互规范

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