Как получить условные типы возврата в ответном запросе

Несмотря на то, что мы обсуждали ранее в комментариях, я дам вам ответ относительно ввода вашей функции useNetworkQuery, и это примерно то, о чем вы спрашиваете в этом посте.

Что вам здесь нужно, так это перегрузка функции, чтобы помочь различить, что возвращает useNetworkQuery.

Простое определение типа возвращаемого значения вашей функции как NetworkQueryResult | NetworkMutationResult не будет работать достаточно хорошо, потому что TypeScript не сможет определить, какой из этих двух является возвращаемым, а только то, что все возвращаемое может быть одним из этих «поэтому относитесь к ним так, как будто они были оба».

Как насчет замены useNetworkQuery на это?

export function useNetworkQuery<TData = any, TError extends Error = Error>(props: Exclude<IUseNetworkCallWithClient, "method"> & { method: NTWRK_METHODS.GET; }): UseQueryResult<TData, TError>;
export function useNetworkQuery<TData = any, TError extends Error = Error, TVariables = any>(props: Exclude<IUseNetworkCallWithClient, "method"> & { method: Exclude<NTWRK_METHODS, NTWRK_METHODS.GET>; }): UseMutationResult<TData, TError, TVariables>;
export function useNetworkQuery<TData = any, TError extends Error = Error, TVariables = any>(props: IUseNetworkCallWithClient): UseQueryResult<TData, TError> | UseMutationResult<TData, TError, TVariables> {
  const { queryKey, axiosClient, url, persist, method, params = "" } = props;

  if (method === NTWRK_METHODS.GET) {
    return useQuery<TData, TError>({
      queryKey: [queryKey],
      queryFn: async () => {
        const data = await axiosClient.request({
          method: NTWRK_METHODS.GET,
          url: url,
          params: params,
        });
        return data.data;
      },
      enabled: false,
      meta: { persist },
    });
  }

  return useMutation<TData, TError, TVariables>({
    mutationKey: [queryKey],
    mutationFn: async () => {
      const data = await axiosClient.request({
        method: method,
        url: url,
        data: params,
      });
      return data.data;
    },
    meta: { persist },
  });
}

Небольшое пояснение по этому поводу:

1. Мы перегружаем функцию двумя сигнатурами, которые меняют тип возвращаемого значения на UseQueryResult<TData, TError>, если данное props включает свойство method, равное NTWRK_METHODS.GET, или меняет его на UseMutationResult<TData, TError, TVariables> для любого другого NTWRK_METHODS, которое не является NTWRK_METHODS.GET.
2. Мы добавляем в функцию дженерики для TData, TError и TVariables, которые являются дженериками, принимаемыми функциями useQuery и useMutation. Таким образом, ваша функция useNetworkQuery сможет сохранять правильное поведение при наборе текста вместо того, чтобы все устанавливать на any.

Предыдущая функция должна работать достаточно хорошо, а как насчет makeNetworkCall? Если вы попытаетесь вернуть useNetworkQuery напрямую, вы заметите, что получите сообщение об ошибке, сообщающее, что сигнатура вызова реализации не видна извне. Это связано с тем, что когда вы перегружаете функцию, при вызове функции учитываются только сигнатуры перегрузки, а сигнатуры реализации служат только для реализации.

Затем вам следует добавить дополнительную перегрузку к useNetworkQuery:

export function useNetworkQuery<TData = any, TError extends Error = Error, TVariables = any>(props: IUseNetworkCallWithClient): UseQueryResult<TData, TError> | UseMutationResult<TData, TError, TVariables>;

По сути, это та же подпись, что и реализация.

Теперь вы можете перегрузить свою функцию makeNetworkCall:

export function makeNetworkCall<TData = any, TError extends Error = Error>(props: Exclude<IUseNetworkCallWithClient, "method"> & { method: NTWRK_METHODS.GET; }): UseQueryResult<TData, TError>;
export function makeNetworkCall<TData = any, TError extends Error = Error, TVariables = any>(props: Exclude<IUseNetworkCallWithClient, "method"> & { method: Exclude<NTWRK_METHODS, NTWRK_METHODS.GET>; }): UseMutationResult<TData, TError, TVariables>;
export function makeNetworkCall<TData = any,TError extends Error = Error,TVariables = any>(props: IUseNetworkCallWithClient): UseQueryResult<TData, TError> | UseMutationResult<TData, TError, TVariables>;
export function makeNetworkCall(props: IUseNetworkCallWithoutClient) {
  const { method, queryKey, url, persist, params = "" } = props;
  const config = {
    axiosClient,
    queryKey: queryKey,
    method: method,
    url: url,
    persist: persist,
    params: params,
  };

  return useNetworkQuery(config);
}

Наконец, вы можете вызвать хук makeNetworkCall из своих компонентов:

const getQuery = makeNetworkCall({ method: NTWRK_METHODS.GET }); // Type is UseQueryResult.
const postQuery = makeNetworkCall({ method: NTWRK_METHODS.POST }); // Type is UseMutationResult.

В качестве примечания относительно крючка useAuthCalls...

А как насчет замены на:

export const useAuthCalls = () => {
  const logInMutation = makeNetworkCall({
    method: NTWRK_METHODS.POST,
    url: "/users",
    queryKey: "login",
    persist: true,
    params: "",
  });

  return {
    logIn: logInMutation.mutateAsync,
  };
};

Таким образом, вы всегда используете перехватчик makeNetworkCall и возвращаете mutateAsync только для вызова logIn. Вы сможете без проблем вызывать это из своих обработчиков действий.

В качестве предложения переименуйте свой makeNetworkCall во что-то, что начинается с use. Причина этого в том, чтобы напомнить вам, что на самом деле это крючок и к нему следует относиться как к таковому. Это означает, что его всегда следует вызывать по порядку и только внутри компонентов React.

Если это поможет вам лучше это представить, вот CodeSandbox, который вы можете проверить: