typescript 在哪些情况下TanStack useQuery函数中的AbortSignal未定义？

fnvucqvd 于 2023-05-30 发布在 TypeScript

关注(0)|答案(1)|浏览(169)

TanStack React Query（https://tanstack.com/query/v4/docs/react/guides/query-cancellation）的文档解释了queryFn属性如何接收具有signal属性的对象，该属性可用于取消查询，如本例所示。

const query = useQuery({
  queryKey: ['todos'],
  queryFn: async ({ signal }) => {
    const todosResponse = await fetch('/todos', {
      signal,
    })
    const todos = await todosResponse.json()
    const todoDetails = todos.map(async ({ details }) => {
      const response = await fetch(details, {
        signal,
      })
      return response.json()
    })

    return Promise.all(todoDetails)
  },
})

问题是，对于TypeScript，这个信号属性的类型是AbortSignal | undefined。对于我正在使用的API，必须有条件地检查是否设置了signal，这给代码增加了很多复杂性，因此了解在哪些条件下没有定义signal对象将非常有帮助。任何想法将不胜感激。

typescript

来源：https://stackoverflow.com/questions/76356388/under-which-conditions-is-the-abortsignal-in-the-tanstack-usequery-function-unde

1条答案

按热度按时间

mftmpeh81#

react-query v4.29.11*

如果AbortController类存在，则signal将存在。让我们来看看源代码：
addSignalProperty()函数将signal属性添加到查询函数上下文中，如下所示：

const addSignalProperty = (object: unknown) => {
      Object.defineProperty(object, 'signal', {
        enumerable: true,
        get: () => {
          if (abortController) {
            this.abortSignalConsumed = true
            return abortController.signal
          }
          return undefined
        },
      })
    }

    addSignalProperty(queryFnContext)

通过getAbortController()函数得到abortController

export function getAbortController(): AbortController | undefined {
  if (typeof AbortController === 'function') {
    return new AbortController()
  }
  return
}

这就是为什么signal属性的TS类型是：AbortSignal | undefined。
官方文件也提到了这一点。
AbortController API在大多数运行时环境中都可用，但如果运行时环境不支持它，则查询函数将接收undefined。如果您愿意，您可以选择polyfill AbortController API，有几个可用的。

赞(0）回复(0）举报 2023-05-30

我来回答

typescript 在哪些情况下TanStack useQuery函数中的AbortSignal未定义？

1条答案

相关问题

热门标签

最新问答