Not allowing query options with enabled, placeholder data... for useSuspenseQuery

[LeonardoTrapani]

Currently, for valid reasons, useSuspenseQuery doesn't allow "enabled" and other properties

A (very common) approach is having queryOptions, and using them in useQuery or useSuspenseQuery:

export const getTodoQueryOptions = (todoUuid?: string) =>
  queryOptions({
    queryKey: ["todo", todoUuid],
    queryFn: () => getTodo(todoUuid),
    enabled: !!todoUuid
  });

const { data: todo } = useQuery(getTodoQueryOptions(todoUuid));

The issue is those query options can be used without any problem or lint with useSuspenseQuery, even though enabled shouldn't be used for a useSuspenseQuery.

What do you think about having different types, or figuring out a solution to give a typescript problem (for enabled, and all other properties that shouldn't be used in useSuspenseQuery).

In large codebases, as the one where I am working on currently, it's very easy to use queryOptions that you initiated for another thing, not thinking about if you can use them or not, and the issue can be barely noticeable without any ts error

Would a pr with a solution for this be appreciated?

[TkDodo]

the recommendation here would be to use the skipToken for disabling the query; this not only type narrows todoUUid correctly for when passed to getTodo, we also disallow options that contain a skipToken to be passed to useSuspenseQuery:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRwK4FMoE8DyYbAQB2AzgDRyonoDKVY6p6AihthSQNbBgAqEnRnAC+cAGZQIIOAHIAAjACGpJQGNOAeijpFqmAFo0mLDIBQpsaiJ7CROAHN0MfgBMIACmAuAXHBIwoYCJ7AEpEUzg4bRhUKDsABUkQYGoAOm0SCAAbADd0TxcQ02FzdAAPSFg4VWJ-BydXCFZjPAJauABeOHcYCDcAVVQvAH5ff0DgsI6APgiUNlx8WxJ3BDnIo2wAaXQsXwBtACJet0OKE4hBrwBdMnX54wAxIl8Lq5c4Ye6p6frnPo8byGhTgY24fAEjDukWEIQA3OYaipEHAXIolK8ASJOpRqHQSAwmM1sO5HP83MTFm1SO5DgBGABMAGZDiF4UA

[LeonardoTrapani]

Yes I get that approach, but it doesn't directly fix the problem.

The problem occurs when using existing queryOptions, that probably are being used for other useQuery methods on big codebases, and might have some properties such as enabled or placholder data.

When you then use the same queryOptions, but use it for useSuspenseQuery, it doesn't warn you that it doesn't work.

Hope I was clear: I know there are many solutions to make it work (like the one you provided), the issue is that ts doesn't give any errors when using it wrong!