失败的 useMutation 请求的 TypeScript 类型是什么？

Question

考虑以下代码：

const {
  mutate: storeData,
} = useMutation(...) // useMutation from @vue/apollo-composable

const sendForm = handleSubmit(async (values) => {
  try {
    const result = await storeData()
    console.log(result)
  } catch (e) { // <---- what is the TypeScript type of e?
    ...
  }
})

我想用它的 TypeScript 类型注释 catch(e) 的 e 参数 - 但它是哪种类型？如果您知道解决方案，如果可能的话，还请解释一下我自己是如何解决这个问题的，谢谢！

Answer 1

快速查看函数的source code 后，它似乎抛出了一个ApolloError，根据this answer，可以从客户端导入：

import { ApolloError } from '@apollo/client/errors';

解释一下我自己是怎么想出来的

基本上只需看看函数可能抛出什么，然后找出如何导入它（stackoverflow 在这里真的很有帮助）。当然，这只适用于其他包也用打字稿编写的情况。否则最好的选择可能是使用Error。

Answer 2

查看apollo的代码，类型为ApolloError

https://github.com/vuejs/apollo/blob/526fbacc18861029494963d03a88d7995f1cfc1f/packages/vue-apollo-composable/src/util/toApolloError.ts#L4

你可以尝试两种策略来推断类型

import { ApolloError, isApolloError } from '@apollo/client/core'
import { GraphQLErrors } from '@apollo/client/errors'

export function toApolloError (error: unknown): ApolloError {
  if (!(error instanceof Error)) {
    return new ApolloError({
      networkError: Object.assign(new Error(), { originalError: error }),
      errorMessage: String(error),
    })
  }

  if (isApolloError(error)) {
    return error
  }

  return new ApolloError({ networkError: error, errorMessage: error.message })
}

export function resultErrorsToApolloError (errors: GraphQLErrors): ApolloError {
  return new ApolloError({
    graphQLErrors: errors,
    errorMessage: `GraphQL response contains errors: ${errors.map((e: any) => e.message).join(' | ')}`,
  })
}

试试这样的：

try  {  
  const result = await storeData()
  console.log(result)  
}  catch  (error: ApolloError)  {  
  // your stuff
}

// or
 
try  {  
  const result = await storeData()
  console.log(result)  
}  catch  (error)  { 
if (error instanceof ApolloError) {
 
  // your stuff
}else {
  // other stuff
}