Make `useQuery` with `suspense: true` to return non-nullable `data`

Describe the feature you’d like to request

{ suspense: true } should let us use data without checking its integrity.

We can use suspense: true in SSR now, see #3130

Describe the solution you’d like to see

Given

const postQuery = trpc.post.byId.useQuery({ id }, { suspense: true });

postQuery.data should be not be nullable.

Considerations: if enabled: true, we should not infer it as non-nullable

Desribe alternate solutions

• Default options to set suspense: true
• Add a useSuspenseQuery / useSuspenseInfiniteQuery

Another approach would be to enable this behavior globally when creating the react-query hooks.

export trpc = createTRPCReact<Context>({suspense: true})

Additional information

• enabled: true/false should still work
• We need to narrow the generic so we still can’t pass extra params to opts

[KATT]

I definitely want this ASAP.

I have started using suspense in my app now as server-side suspense now works.

[iway1]

Splitting the queries into different components

@KATT I don’t think this is a viable solution in practice because (1) that’s going to be more work for the developer and (2) would make it impossible to create certain types of user interfaces.

I guess (2) is more important. The issue is that we’d be forced to create multiple <Suspense/> components each with their own fallback and wouldn’t be able to create a single fallback with multiple queries.

It’s not uncommon to have some piece of UI wait for data from multiple requests before showing that piece of UI, and to show the same common fallback when either of the queries are loading (which means we’re forced to have each query within the same suspense component).

In such situations, we either don’t use suspense or we have a request waterfall. I think mix and matching suspense: true and suspense: false is also probably bad practice because of lack of consistency within a codebase.

So, yeah, suspense: true simply doesn’t cover all use cases.

Adding support for useQueries()

This would be great! This would solve the problem. I would probably switch to <Suspense/> if we had useQueries, personally. And if we could figure out the typescript magic to have it return non-nullable data as well that would really great.