[ts] how to avoid non-null assertion with dependent queries

[stefanprobst]

lots of my dependent query hooks look something like this:

const entity = useGetEntityById(
  {
    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
    id: id!,
  },
  { enabled: id != null }
);

is there a better way which avoids the non-null assertion?

[TkDodo]

As it so happens, I just wrote about this: https://tkdodo.eu/blog/react-query-and-type-script

tl;dr: one way is to keep the id undefined when passing it to the queryFn, and handling it there by rejecting the Promise. It's a bit safer because you can bypass the enabled flag, e.g. with the refetch function.

[stefanprobst]

thanks, makes sense!

[tianhuil]

Thanks for proposing this!

[netanel-haber]

@TkDodo
For a simple query-fn with one dependency, to avoid duplication, using your answer:

const dependOn = <T, R>(dependency: T | undefined, queryFn: (dependency: T) => Promise<R>): (() => Promise<R>) => {
  return typeof dependency === 'undefined'
    ? () => Promise.reject(new Error('Dependency not passed to query'))
    : () => queryFn(dependency);
};

[netanel-haber]

And more scaffolding but less generic:

interface IDependentQueryFnArgs<T, R> {
  dependency: T | undefined;
  queryFn: (dependency: T) => Promise<R>;
  queryKey: QueryKey;
}

interface IDependentQueryOptions<R> {
  queryFn: () => Promise<R>;
  enabled: boolean;
  queryKey: QueryKey;
}

export const dependentQueryOptions = <T, R>({
  dependency,
  queryFn,
  queryKey,
}: IDependentQueryFnArgs<T, R>): IDependentQueryOptions<R> => ({
  queryFn:
    typeof dependency === 'undefined'
      ? () => Promise.reject(new Error('Dependency not passed to query'))
      : () => queryFn(dependency),
  enabled: Boolean(dependency),
  queryKey: [...queryKey, dependency],
});