Apollo useMutation报错Cannot read property 'data' of undefined如何解决

报错根因 #

你遇到的TypeError: Cannot read property 'data' of undefined是两个核心问题共同导致的：

1. createUser是异步方法，调用后不会立刻返回结果，你在调用后立刻读取dataU.url时，mutation还没执行完成，dataU还处于初始的undefined状态
2. 部分版本的Apollo Client中，useMutation返回的data字段在mutation未执行时默认就是undefined，没有空对象作为默认值，直接读取属性就会触发报错

另外关于router的疑问：Next.js的router.push仅支持当前应用内的相对路径/同域名路由，如果你要跳转到外部绝对URL，直接用window.location.href = 目标url即可，不需要调用router方法。

解决方案（三选一即可） #

方案1：用async/await直接读取mutation返回值 #

createUser调用后会返回Promise，resolve值就是mutation的执行结果，不需要依赖外部的dataU变量，修改handler函数即可：

const handler = async () => {
  // 加兜底判断避免user为空
  if (!user) return
  try {
    const { data: mutationRes } = await createUser({
      variables: {
        url: `https://mywebsite.com/${user}`,
        plan: "Cool",
      },
    })
    // 绝对路径直接用location跳转
    window.location.href = mutationRes.createUser.url
    // 如果是同应用内相对路径再用：router.push(mutationRes.createUser.url)
  } catch (err) {
    console.error('mutation执行失败', err)
  }
}

方案2：用useMutation的onCompleted回调 #

在声明useMutation的时候直接配置成功回调，mutation执行完成后自动触发跳转：

const [
  createUser,
  {
    data: dataU,
    loading: loadingU,
    error: errorU,
  },
] = useMutation(CREATE_USER, {
  // 执行成功回调
  onCompleted: (res) => {
    window.location.href = res.createUser.url
  },
  // 执行失败回调
  onError: (err) => {
    console.error('mutation报错', err)
  }
})

// handler简化为直接调用
const handler = () => {
  if (!user) return
  createUser({
    variables: {
      url: `https://mywebsite.com/${user}`,
      plan: "Cool",
    },
  })
}

方案3：监听dataU变化触发跳转 #

如果需要保留使用外部的dataU变量，就用useEffect监听它的变化，有值的时候再执行跳转：

// 新增useEffect监听dataU
useEffect(() => {
  // 加可选链避免读取undefined属性报错
  if (dataU?.createUser?.url) {
    window.location.href = dataU.createUser.url
  }
}, [dataU])

const handler = () => {
  if (!user) return
  createUser({
    variables: {
      url: `https://mywebsite.com/${user}`,
      plan: "Cool",
    },
  })
}

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