conscious-sapphire

Type error when disabling useLiveSuspenseQuery

I'm trying to conditionally enable/disable a simple query based on an external value like so:

export const useUser = (userId? : string) => {
  return useLiveSuspenseQuery((q) => {
    if (!userId) return undefined
    return q.from({ user: usersCollection }).where(({ user }) => eq(user.id, userId)).findOne()
  }, [userId])
}

export const useUser = (userId? : string) => {
  return useLiveSuspenseQuery((q) => {
    if (!userId) return undefined
    return q.from({ user: usersCollection }).where(({ user }) => eq(user.id, userId)).findOne()
  }, [userId])
}

However, returning undefined from the useLiveSuspenseQuery callback produces a type error:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '(q: InitialQueryBuilder) => QueryBuilder<{ baseSchema: { user: any; }; schema: { user: any; }; fromSourceName: "user"; hasJoins: false; } & SingleResult> | undefined' is not assignable to parameter of type 'Collection<object, string | number, Record<string, any>, StandardSchemaV1<unknown, unknown>, object> & SingleResult'.
      Type '(q: InitialQueryBuilder) => QueryBuilder<{ baseSchema: { user: any; }; schema: { user: any; }; fromSourceName: "user"; hasJoins: false; } & SingleResult> | undefined' is not assignable to type 'Collection<object, string | number, Record<string, any>, StandardSchemaV1<unknown, unknown>, object>'.ts(2769)

No overload matches this call.
  The last overload gave the following error.
    Argument of type '(q: InitialQueryBuilder) => QueryBuilder<{ baseSchema: { user: any; }; schema: { user: any; }; fromSourceName: "user"; hasJoins: false; } & SingleResult> | undefined' is not assignable to parameter of type 'Collection<object, string | number, Record<string, any>, StandardSchemaV1<unknown, unknown>, object> & SingleResult'.
      Type '(q: InitialQueryBuilder) => QueryBuilder<{ baseSchema: { user: any; }; schema: { user: any; }; fromSourceName: "user"; hasJoins: false; } & SingleResult> | undefined' is not assignable to type 'Collection<object, string | number, Record<string, any>, StandardSchemaV1<unknown, unknown>, object>'.ts(2769)

When I change the hook to use useLiveQuery instead of useLiveSuspenseQuery, the type error goes away. Is this intended behavior? If not, how might I able able to fix it? Thanks!

8 Replies

genetic-orange•2w ago

Yes, this is the expected behaviour currently (although the type error could be better) - see the code here: https://github.com/TanStack/db/blame/15270281f488a7187bf461d534635bef0296a50b/packages/react-db/src/useLiveSuspenseQuery.ts#L146-L153

GitHub

Blaming db/packages/react-db/src/useLiveSuspenseQuery.ts at 1527028...

A reactive client store for building super fast apps - Blaming db/packages/react-db/src/useLiveSuspenseQuery.ts at 15270281f488a7187bf461d534635bef0296a50b · TanStack/db

vicious-gold•7d ago

we should allow returning undefined though hmm actually — useSuspenseQuery doesn't the idea is if you need conditional rendering, just use useQuery we try to copy their design decisions so that makes sense

"The enabled option cannot be exposed because with enabled:false, TanStack Query cannot guarantee that data is not undefined, which is one of the main reasons for using useSuspenseQuery in the first place."

vicious-gold•7d ago

PR w/ more clear error https://github.com/TanStack/db/pull/860

GitHub

Improve error when returning undefined in useLiveSuspenseQuery by K...

Make it clear this isn't supported and they should use useLiveQuery instead.

genetic-orange•7d ago

I wander if we can find a way to get the type error to give this same sort of suggestion when you try to return undefined? It's the type error above that's very obscure.

vicious-gold•7d ago

hmm yeah maybe with an overload?

genetic-orange•7d ago

Yep maybe. A question of ChatGPT on best way to do this.

vicious-gold•7d ago

apparently "poison pill overloads" is the pattern

genetic-orange•7d ago

Great name!

Gaming

Programming

Type error when disabling useLiveSuspenseQuery

Did you find this page helpful?