Allow passing all options to generated ...queryOptions and ...mutationOptions functions

[Valentinusz]

Currently the generated query and mutation option functions only accept request config options.

export function getAllPetsQueryOptions(config: Partial<RequestConfig> & { client?: typeof fetch } = {});

export function createPetMutationOptions(config: Partial<RequestConfig<CreatePetMutationRequest>> & { client?: typeof fetch } = {})

Generated hooks on the other hand have a query/mutation field that allows the passing of additional options.

The tanstack query docs mention https://tanstack.com/query/latest/docs/framework/react/guides/query-options this pattern where instead of defining wrapper hooks you just directly pass the queryOptions/mutationOptions to useQuery/useMutation.

This is currently not useable for some cases. E.g.:

  const { mutate: createServiceLevelAgreement } = useMutation(
    createServiceLevelAgreementMutationOptions({
      // this is not possible
      mutation: {
        onSuccess: ({ serviceLevelAgreementId }) => {
          void navigate(
            getServiceLevelAgreementDetailsPath(serviceLevelAgreementId)
          );
        },
      },
    })
  );

On the other hand this works:

  const { mutate: createServiceLevelAgreement } =
    useCreateServiceLevelAgreement({
      mutation: {
        onSuccess: ({ serviceLevelAgreementId }) => {
          void navigate(
            getServiceLevelAgreementDetailsPath(serviceLevelAgreementId)
          );
        },
      },
    });

My proposal is to add mutation and query options present on the hooks to the option factory functions as well.

I think this would be a valuable addition since, it can reduce the amount of code that has to be generated as we no longer have to generate wrapper hooks.

[stijnvanhulle]

@Valentinusz Will this new feature help you out here: https://www.kubb.dev/changelog#_4-15-0?

See https://www.kubb.dev/plugins/plugin-react-query/#customoptions

[Valentinusz]

Not really since this would apply the settings globally for the given query / mutation. However I since realized that I could work around this through destructuring:

  const { mutate: createServiceLevelAgreement } = useMutation({
    ...createServiceLevelAgreementMutationOptions({}),
    onSuccess: ({ serviceLevelAgreementId }) => {
      void navigate(getServiceLevelAgreementDetailsPath(serviceLevelAgreementId));
    }
  });

I still think it would probably make sense to have parity between the parameters of the query hook and the query options functions, but it is not high priority.