如何避免来自 Apollo useMutation 钩子的解构突变？答案

【问题标题】：How to avoid destructuring mutation from Apollo useMutation hook?如何避免来自 Apollo useMutation 钩子的解构突变？
【发布时间】：2021-03-21 17:45:40
【问题描述】：

我正在包装 react-apollo 中的 useMutation 钩子，以便我可以在每次使用突变时将错误发送到 Sentry：

import { useMutation } from '@apollo/react-hooks'
import { DocumentNode } from 'graphql'
import { MutationHookOptions } from 'react-apollo'

type UseMutationWithSentryErrorsProps = {
  refetch: MutationHookOptions<any, Record<string, any>>
  from: string
  mutation: DocumentNode
}

export const useMutationWithSentryErrors = ({
  refetch,
  from,
  mutation
}: UseMutationWithSentryErrorsProps) => {
  const response = useMutation(mutation, refetch)

  const [_apolloMutation, { error: mutationError }] = response
  if (mutationError) {
    captureException(mutationError, {
      info: 'There was an error fetching data.',
      from
    })
  }

  return response
}

我如何称呼突变是：

  const [updateSpeakerMutation] = useMutationWithSentryErrors({
    refetch,
    from: 'SomeProvider',
    mutation: UPDATE
  })

问题出在这一行：

  const [_apolloMutation, { error: mutationError }] = response

我收到 variable is not read 错误。如果不访问突变，我无法访问响应错误，但我没有在这个包装函数中使用突变，而是在我真正使用它的地方。我尝试了经典的_ 语法，但仍然是同样的错误。

【问题讨论】：

标签： reactjs typescript eslint react-apollo

【解决方案1】：

你可以这样做：

const [, { error: mutationError }] = response

注意逗号

【讨论】：

我选择将其用作额外检查if (apolloMutation && mutationError) {etc.