Should select on Suspense Query throw errors?

[josipMocha]

Dear TanStack team,

I have a question connected to React Suspense Query select function and how throwing error inside of it is handled.

Lets look at the following example:

type ResolvedDataType = Record<number, string>;

const selectItemById = (id: number) => (data: ResolvedDataType) => {
	const item = data[id];
	if (!item) {
		throw new Error('Item not found');
	}
	return item;
};

const ComponentA = () => {
	const externallyControlledId = 2;

	const { data } = useSuspenseQuery({
		queryKey: ['query-key'],
		queryFn: async () => Promise.resolve<ResolvedDataType>({ 1: 'one' }),
		select: selectItemById(externallyControlledId),
	});

	return <p>{data}</p>;
};

I would expect the data to always be a string, this is why I used suspense.

But in this case, even tho Typescript tells me data is a string, I will end up with a query in error state and data that will be undefined.

Also, rendering of the component will not be canceled by the throw error in the selectItemById because it is caught by Query Observer and never thrown https://github.com/TanStack/query/blob/main/packages/query-core/src/queryObserver.ts#L541.

Is my assumption right, that component useSuspenseQuery should throw if error occurs in the select?

[isBatak]

@TkDodo I found this discussion and PR you made. Is it related to this issue? The docs addition doesn’t mention select, but it feels like the same rule might be implied.

[TkDodo]

if you have a selectError, we will put the observer into error state:

query/packages/query-core/src/queryObserver.ts

Lines 547 to 552 in f15b7fc

	if (this.#selectError) {
	error = this.#selectError as any
	data = this.#selectResult
	errorUpdatedAt = Date.now()
	status = 'error'
	}

then, the react integration will throw that error to the error boundary:

query/packages/react-query/src/useBaseQuery.ts

Lines 124 to 142 in f15b7fc

	// Handle error boundary
	if (
	getHasError({
	result,
	errorResetBoundary,
	throwOnError: defaultedOptions.throwOnError,
	query: client
	.getQueryCache()
	.get<
	TQueryFnData,
	TError,
	TQueryData,
	TQueryKey
	>(defaultedOptions.queryHash),
	suspense: defaultedOptions.suspense,
	})
	) {
	throw result.error
	}

you can clearly see that if you take your own example and put it in a sandobx:

https://stackblitz.com/edit/tanstack-query-zmlk4cr7?file=src%2Findex.tsx&preset=node