useRef输入值无法传入GraphQL mutation的原因排查

问题根源 #

你在初始化useMutation时，直接把firstNameRef.current?.value和lastNameRef.current?.value写进了variables配置里。这部分代码只会在组件第一次渲染时执行，此时输入框还没被用户输入，current.value是空值。后续用户输入修改了ref的current值，但useMutation的variables不会自动更新——它不会监听ref的变化，只会保留初始化时的空值。

而你在createClient里能打印出正确值，是因为调用这个函数时，ref已经拿到了用户输入的最新内容，但这时候mutation的变量还是初始化时的空值，所以传进去的还是空的。

解决方案 #

最直接的办法是调用mutation时动态传入最新的变量值，而不是在useMutation初始化时固定死：

const firstNameRef = useRef();
const lastNameRef = useRef();

const createClientsModal = () => {
  return (
    <Modal
      modalHeader={<h2>Create New Terminal</h2>}
      hideButtons={false}
      buttonContent="Save"
      closeModal={setShow}
      click={createClient}
    >
      <>
        <label htmlFor="firstName">First Name</label>
        <Input
          style={{ marginTop: "10px", marginBottom: "25px" }}
          type="text"
          ref={firstNameRef}
        />
        <label htmlFor="lastName">Last Name</label>
        <Input style={{ marginTop: "10px" }} type="text" ref={lastNameRef} />
      </>
    </Modal>
  );
};

// 初始化useMutation时不需要写固定的variables
const [testCreate] = useMutation(CREATE_CLIENT, {
  errorPolicy: "all",
});

const createClient = () => {
  // 拿到当前最新的输入值
  const firstName = firstNameRef.current?.value;
  const lastName = lastNameRef.current?.value;
  console.log(firstName, lastName);
  
  // 调用mutation时传入实时变量
  testCreate({
    variables: {
      data: {
        clinic: {
          connect: {
            id: id,
          },
        },
        firstName,
        lastName,
      },
    },
  }).then(() => {
    refetch();
    setShow(false);
  });
};

补充说明 #

useRef的current属性变化不会触发组件重渲染，所以React不会重新执行useMutation的配置逻辑。这就导致初始化时的空变量一直被复用，直到你手动在调用时传入新值。这种动态传参的方式能确保每次调用mutation时，都是用的最新的用户输入内容。

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