The TanStack React Query documentation (visit here) provides insights on utilizing the queryFn property with an object containing a signal property for query cancellation. Check out this example:
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)
},
})
A challenge arises when using TypeScript as the type for the signal property is defined as AbortSignal | undefined. This conditionally checking if the signal is set can complicate the code significantly. It would be helpful to understand the circumstances under which this signal object is not defined. Any suggestions or insights on this matter would be greatly appreciated.