[TypeScript] How to make dependent query function arguments type safe?

[eL-HaXo]

I am trying to write a custom hook for a dependent query but I get the following type error when calling testQueryFunction(params). Error: Argument of type 'number | null' is not assignable to parameter of type 'number'.

Custom Hook:

import { useQuery } from 'react-query';

const testQueryFn = async (params: number) => params + 1;

export const useDependentQueryTypeTest = (params: number | null) => {
  return useQuery(
    ['propertiesForList', params],
    async () => {
      return await testQueryFn(params); // Type error here
    },
    {
      enabled: !!params
    }
  );
};

Based on this discussion I'd expect the above to work but typescript doesn't understand that the queryFn will only be called when params is defined. I tried changing the example code to make params the data of another query to more closely match the example and I still get the same type error.

import { useQuery } from 'react-query';

const testQueryFn = async (params: number) => params + 1;

export const useDependentQueryTypeTest = () => {
  const paramsQuery = useQuery<number>(['number'], async () => 1);
  const params = paramsQuery.data;
  return useQuery<number>(
    ['queryKeyString', params],
    async () => {
      return await testQueryFn(params); // Type error here
    },
    {
      enabled: !!params
    }
  );
};

What is the proper way to type this without requiring testQueryFn to accept null arguments?

[TkDodo]

TypeScript can't know that, and technically, typescript is right. You could e.g. still invoke refetch returned from useQuery, which bypassed the enabled prop (on purpose).

I have a short paragraph on this in my TypeScript blog: https://tkdodo.eu/blog/react-query-and-type-script#type-safety-with-the-enabled-option

[eL-HaXo]

Thanks for the response. I suspected the answer in the linked discussion might not actually pass type checking. We landed on the promise rejection while working around this issue but I like the non-null assertion option too.