typescript - TanStack useQuery函数中的AbortSignal在什么情况下未定义？

Question

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 |未定义。对于我正在使用的 API，必须有条件地检查 signal 是否已设置，这会增加代码的复杂性，因此了解此 signal 在什么条件下会非常有帮助 对象未定义。任何想法将不胜感激。

Answer 1

react-query v4.29.11

如果 AbortController 则信号将存在类存在。我们看一下源码:

signal 属性通过 addSignalProperty() 添加到查询函数上下文中函数，见下图:

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

    addSignalProperty(queryFnContext)

abortController 由 getAbortController() 获取功能

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

这就是为什么signal属性的TS类型是:AbortSignal |未定义。

官方文档也提到了。

The AbortController API is available in most runtime environments, but if the runtime environment does not support it then the query function will receive undefined in its place. You may choose to polyfill the AbortController API if you wish, there are several available.