如何使用react-query useMutation实现多部分文件上传及链式mutation调用

推荐实现方案：使用 mutateAsync 按异步流程处理 #

React Query 针对这种有先后依赖的 mutation 场景提供了mutateAsync方法，它会将 mutation 执行逻辑包装为标准 Promise，可以直接用常规的async/await写法处理，完全规避作用域冲突问题，逻辑也更清晰。

修改后的onSubmit代码如下：

const onSubmit = async (userData: JsonFormUser) => {
  if (userData.photoType === 'other') {
    const myJsonData : JsonDataUserPhotoOther = {
      data: {
        id: userObject.id,
        type: 'user',
        attributes: {
          photoType: userData.photoType,
          photoName: userData.photoName,
        },
        // 预留Drupal JSON:API要求的文件关联字段
        relationships: {}
      },
    };

    // 上传新图片的逻辑
    if (imageSrc && !imageSrc.includes(baseUrl)) {
      try {
        const myCroppedImgBlob = await getCroppedImg(
          imageSrc,
          croppedAreaPixels,
        );
        // 等待文件上传完成，拿到返回的文件资源信息
        const photoUploadRes = await mutatePhotoFile.mutateAsync(myCroppedImgBlob);
        // 补全用户数据和上传文件的关联关系（Drupal JSON:API要求必须传该字段才能绑定文件）
        myJsonData.data.relationships.field_ref_image = {
          data: {
            type: 'file--file',
            id: photoUploadRes.data.id
          }
        }
        // 上传成功后再执行用户信息更新
        mutateUser.mutate(myJsonData);
      } catch (err) {
        // 上传失败直接触发错误提示
        setShowFileAlert(true);
      }
    } else {
      // 没有新图片需要上传时直接更新用户信息
      mutateUser.mutate(myJsonData);
    }
  }
}

原来的mutatePhotoFile定义不需要做任何修改，全局配置的onSuccess、onError回调仍然会正常执行，和本次调用的逻辑互不冲突。

可选方案：使用单次调用专属回调 #

如果不想用async/await写法，也可以在调用mutate时传入本次调用专属的onSuccess回调，该回调的作用域可以直接访问onSubmit内的局部变量：

// 上传文件的逻辑修改为
mutatePhotoFile.mutate(myCroppedImgBlob, {
  onSuccess: (response: ResponseMutatePhoto) => {
    // 直接访问局部变量myJsonData，补全文件关联后调用更新接口
    myJsonData.data.relationships.field_ref_image = {
      data: {
        type: 'file--file',
        id: response.data.id
      }
    }
    mutateUser.mutate(myJsonData);
  }
})

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