useClient in @kubb/plugin-tanstack-query

[luixo]

What is the problem this feature would solve?

I need to use multiple clients for the same set of useQuery / useMutation generated hooks.

External documents/projects?

No response

What is the feature you are proposing to solve the problem?

Currently I have generated code:

export function useFoo(
  options: {
    mutation?: UseMutationOptions<...>;
    client?: Foo['client']['parameters'];
  } = {},
) {
  const { mutation: mutationOptions, client: clientOptions = {} } = options ?? {};
  return useMutation({
    mutationFn: async (data) => {
      const res = await client<...>({
        method: 'post',
        url: `...`,
        data,
        ...clientOptions,
      });
      return res.data;
    },
    ...mutationOptions,
  });
}

I want it be changed to:

// This should be either `useClient` or `client` depending on option
import { useClient, client } from "client-path";

export function useFoo(
  options: {
    mutation?: UseMutationOptions<...>;
    client?: Foo['client'];
  } = {},
) {
  const { mutation: mutationOptions, client: clientWithParams = {} } = options;
  const client = useClient(clientWithParams.options);
  return useMutation({
    mutationFn: async (data) => {
      const res = await (clientWithParams.return || client)<...>({
        method: 'post',
        url: `...`,
        data,
        ...clientWithParams.parameters,
      });
      return res.data;
    },
    ...mutationOptions,
  });
}

// tanstack-query plugin options
type Options = {
  //...
  client?: {
    importPath?: string
    importHook?: boolean; // if true - import `useClient` instead of `client`
  }
};

What alternatives have you considered?

Replacing the template.
It seems like the template is a rendered react component which means it's basically non-modifiable, I have to rewrite it from scratch.
It's easier to replace lines by regex after generating.

[stijnvanhulle]

Proposal:

import client from '@kubb/plugin-client/clients/axios'
import useClient from './path'
import type { AddPetMutationRequest, AddPetMutationResponse, AddPet405 } from '../../models/AddPet.ts'
import type { RequestConfig, ResponseErrorConfig } from '@kubb/plugin-client/clients/axios'
import type { UseMutationOptions } from '@tanstack/react-query'
import { useMutation } from '@tanstack/react-query'

export const addPetMutationKey = () => [{ url: '/pet' }] as const

export type AddPetMutationKey = ReturnType<typeof addPetMutationKey>

/**
 * @description Add a new pet to the store
 * @summary Add a new pet to the store
 * {@link /pet}
 */
export async function addPetHook(data: AddPetMutationRequest, config: Partial<RequestConfig<AddPetMutationRequest>> = {}) {
  const res = await client<AddPetMutationResponse, ResponseErrorConfig<AddPet405>, AddPetMutationRequest>({ method: 'POST', url: `/pet`, data, ...config })
  return res.data
}

async function addPetHookFactory(_client: typeof client) {
  return async function addPetHook(data: AddPetMutationRequest, config: Partial<RequestConfig<AddPetMutationRequest>> = {}) {
    const res = await _client<AddPetMutationResponse, ResponseErrorConfig<AddPet405>, AddPetMutationRequest>({ method: 'POST', url: `/pet`, data, ...config })
    return res.data
  }
}

/**
 * @description Add a new pet to the store
 * @summary Add a new pet to the store
 * {@link /pet}
 */
export function useAddPetHook(
  options: {
    mutation?: UseMutationOptions<AddPetMutationResponse, ResponseErrorConfig<AddPet405>, { data: AddPetMutationRequest }>
    client?: Partial<RequestConfig<AddPetMutationRequest>>
  } = {},
) {
  const { mutation: mutationOptions, client: config = {} } = options ?? {}
  const mutationKey = mutationOptions?.mutationKey ?? addPetMutationKey()
  
  const client = useClient(config)

  return useMutation<AddPetMutationResponse, ResponseErrorConfig<AddPet405>, { data: AddPetMutationRequest }>({
    mutationFn: async ({ data }) => {
      return addPetHookFactory(client)(data, config)
    },
    mutationKey,
    ...mutationOptions,
  })
}