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 | undefined

。对于我正在使用的 API，必须有条件地检查

signal

是否已设置会增加代码的复杂性，因此了解在哪些条件下未定义此

signal

对象将非常有帮助。任何想法将不胜感激。

Answer 1

反应查询 v4.29.11

如果

signal

 类存在，则 

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 | undefined

。

官方文档也提到了。

AbortController

API 在大多数运行时环境中都可用，但如果运行时环境不支持它，则查询函数将在其位置接收

undefined

。如果您愿意，您可以选择填充

AbortController

API，有多种可用。

Answer 2

好吧，就我而言，我只是这样做了，它起作用了

const getUserData = async ({
    queryKey,
    signal,
  }: QueryFunctionContext<[string, Person]>): Promise<User> => {
    const [, selectedUser] = queryKey;
    const response = await axios.get(`/api/person?person=${selectedUser}`, {
      signal,
    });
    return response.data;
  };

  const { data, error, isLoading } = useQuery({
    queryKey: ["users", selectedUser as Person],
    queryFn: getUserData,
    enabled: !!selectedUser,
  });