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,
  })
}

[stijnvanhulle]

@luixo Version 3.5.5 of Kubb adds client as property to the clientConfig which means you could pass through your own client based on a hook. As of today you will need to pass that manually when using the hook but that will already make your request work. Next will be to add importHook as option to the react-query plugin.

For example

export async function findPetsByStatus(
  { step_id }: { step_id: FindPetsByStatusPathParams['step_id'] },
  config: Partial<RequestConfig> & { client?: typeof client } = {},
) {
  const { client: request = client, ...requestConfig } = config

  const res = await request<FindPetsByStatusQueryResponse, ResponseErrorConfig<FindPetsByStatus400>, unknown>({
    method: 'GET',
    url: getFindPetsByStatusUrl({ step_id }).toString(),
    ...requestConfig,
  })
  return res
}


findPetsByStatus({step_id: 'sdfs'}, {
  client: customClient
})