Extending useQuery hook

[magom001]

At our current project we have a need to extend the default useQuery with some custom logic. Basically we need to disable queries if the user is not authenticated. For this I created my own custom hook useAuthenticatedQuery.

export function useAuthenticatedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
    options: UseQueryOptions<TQueryFnData, TError, TData>,
): UseQueryResult<TData, TError>;

export function useAuthenticatedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
    queryKey: QueryKey,
    options?: UseQueryOptions<TQueryFnData, TError, TData>,
): UseQueryResult<TData, TError>;

export function useAuthenticatedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData>(
    queryKey: QueryKey,
    queryFn: QueryFunction<TQueryFnData>,
    options?: UseQueryOptions<TQueryFnData, TError, TData>,
): UseQueryResult<TData, TError>;

export function useAuthenticatedQuery<TQueryFnData, TError, TData = TQueryFnData>(
    arg1: QueryKey | UseQueryOptions<TQueryFnData, TError, TData>,
    arg2?: QueryFunction<TQueryFnData> | UseQueryOptions<TQueryFnData, TError, TData>,
    arg3?: UseQueryOptions<TQueryFnData, TError, TData>,
): UseQueryResult<TData, TError> {
    const parsedOptions = parseQueryArgs(arg1, arg2, arg3);

    const [{ status }] = useAuthStatus();
    const addQueryKey = useAddAuthenticatedQueryKey();

    const options = {
        ...parsedOptions,
        enabled: status === AuthStatus.Authenticated && (parsedOptions.enabled ?? true),
    };

    const query = useQuery(options);

    useLayoutEffect(() => {
        addQueryKey(options.queryKey!);
    }, [options.queryKey, addQueryKey]);

    return query;
}

My objective was to seamlessly switch between useQuery and useAuthenticatedQuery.

It works like a charm but the only problem is that the implementation uses parseQueryArgs which is not exported from the package. I had to copy-paste this function along with isQueryKey to make this approach work.

Would it be possible to export parseQueryArgs or what is the right approach to what I am trying to achieve?

Best regards!

P.S.: this library is a life-saver!

[TkDodo]

The overloads of the function are only needed because we (currently) support multiple ways of calling a query:

useQuery(key, fn)
useQuery(key, { queryFn: fn })
useQuery({ queryKey: key, queryFn: fn })

when you build your custom abstractions for your product, it's very unlikely that you'll mix and match those three patterns. If you choose one, you won't have to implement all the overloads :)

[magom001]

Thanks for the reply. The point is not choose a pattern but to make the hooks interchangeable (switch between useQuery and useAuthenticatedQuery regardless of the overload). Hence I also need my hook to be overloaded.