React中GraphQL查询与突变值未及时更新的修复咨询

我看了你遇到的问题——第一次添加好友正常，但修改邮箱后再提交，还是用旧的ID。本质原因是你没处理好Apollo查询的异步特性，还有React状态更新的异步性，导致后续操作拿到的都是旧值。

问题根源拆解 #

1. 同步调用异步操作：原来的getFriendId里，调用loadUsers后立刻就执行addFriend，但useLazyQuery是异步的，此时data还没返回，自然拿的是上一次的旧数据。
2. 状态更新的异步性：就算你在getFriendId里写了setId，React的状态更新也是异步批量处理的，紧接着调用addFriend时，id还没更新成新值。
3. 变量未实时更新：你后来的代码里，useLazyQuery的variables一开始就绑定了初始的friendEmail，没有随输入的变化动态更新。

修复方案 #

核心思路是利用Apollo的回调函数处理异步结果，避免依赖未更新的状态，具体步骤如下：

1. 用onCompleted回调处理查询结果并触发突变

把获取ID和执行添加好友突变的逻辑，放到useLazyQuery的onCompleted回调里——这个回调会在查询成功返回数据后触发，此时你能拿到最新的查询结果，直接用它来调用突变，完全不需要依赖id状态。

2. 动态传递查询变量

调用loadUsers时，实时传入当前的friendEmail，确保每次查询用的都是最新输入的邮箱。

3. 移除冗余的id状态（可选但更简洁）

既然在onCompleted里直接拿到了好友ID，没必要再存到id状态里，直接用这个值构造突变参数即可，避免状态更新的延迟问题。

修正后的完整代码 #

export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
  toggleShowPage,
  showAddFriendEmailPage,
}) => {
  const [friendEmail, setFriendEmail] = useState('ana@hotmail.com');
  const [errorMessage, setErrorMessage] = useState('');

  // 初始化查询，不提前绑定variables，留到调用时传
  const [loadUsers, { loading: queryLoading, error: queryError }] = useLazyQuery(LoadUsersQuery, {
    onCompleted: (data) => {
      if (!data?.users?.nodes?.length) {
        setErrorMessage('User Not Found');
        return;
      }

      // 直接从查询结果拿最新ID，不用存state
      const friendId = data.users.nodes[0].id;
      console.log('friendId', friendId);

      // 构造突变参数并执行
      const relationParams = {
        input: {
          relatedUserId: Number(friendId),
          type: RelationType.Friend,
          userId: 8, // 这里建议换成当前登录用户的ID，不要写死
        },
      };
      createUserRelationMutation({ variables: relationParams });
    },
    onError: (error) => {
      setErrorMessage(error.message);
    },
  });

  // 初始化突变，同样不提前绑定variables
  const [createUserRelationMutation, { loading: mutationLoading, error: mutationError }] = useCreateUserRelationMutation({
    onCompleted: (addingFriendData) => {
      console.log('relation created', addingFriendData);
      // 这里可以添加成功后的逻辑，比如提示用户、清空输入框等
      setFriendEmail('');
    },
    onError: (error) => {
      setErrorMessage(error.message);
    },
  });

  // 处理提交逻辑
  const handleSubmit = () => {
    if (!friendEmail.trim()) {
      setErrorMessage('请输入邮箱');
      return;
    }
    // 调用查询时，动态传入当前的邮箱变量
    loadUsers({
      variables: { where: { email: friendEmail.toLocaleLowerCase() } },
    });
  };

  return (
    <>
      <View style={scaledAddFriendEmailStyles.searchTopTextContainer}>
        {errorMessage && <Text style={{ color: 'red' }}>{errorMessage}</Text>}
      </View>
      <View style={scaledAddFriendEmailStyles.searchFieldContainer}>
        <Item style={scaledAddFriendEmailStyles.searchField}>
          <Input
            placeholder="Email"
            onChangeText={(text) => setFriendEmail(text)}
            value={friendEmail}
          />
        </Item>
        <View style={scaledAddFriendEmailStyles.buttonContainer}>
          <Button
            rounded
            style={scaledAddFriendEmailStyles.button}
            onPress={handleSubmit}
            disabled={queryLoading || mutationLoading}
          >
            <Text style={scaledAddFriendEmailStyles.text}>
              {queryLoading || mutationLoading ? '加载中...' : 'Add Friend'}
            </Text>
          </Button>
        </View>
      </View>
    </>
  );
};

关键优化点说明 #

• 异步流程闭环：查询成功后才触发突变，确保用的是最新的查询结果，完全避开了状态更新的异步延迟问题。
• 动态变量传递：每次调用loadUsers时都传入当前的friendEmail，保证查询的是最新输入的邮箱。
• 错误处理完善：分别给查询和突变加上onError回调，统一处理错误信息，提升用户体验。
• 加载状态处理：给按钮加上disabled状态和加载提示，避免用户重复点击。

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