Question: How can I send parameters to the mutations ?

[lavocatt]

The generated code creates a mutation for me:

export const useSecurityServiceLogin = (
  options?: Omit<
    UseMutationOptions<
      Awaited<ReturnType<typeof SecurityService.login>>,
      unknown,
      {
        requestBody: {
          brokerName: string;
          userName: string;
          password: string;
          jolokiaHost: string;
          scheme: string;
          port: string;
        };
      },
      unknown
    >,
    'mutationFn'
  >,
) =>
  useMutation(({ requestBody }) => SecurityService.login(requestBody), options);

However, I don't know how to use it, because if in the code I'm doing something like:

  const { data: dataToken, isSucces: tokenSuccess } = useSecurityServiceLogin({
    options: {
      brokerName: getBrokerKey(broker, ordinal),
      userName: userName,
      password: password,
      jolokiaHost: jolokiaHost,
      port: jolokiaPort,
      scheme: protocol,
    },
  });

I'm getting errors from the linter

I can make it work like this:

  const { data, isSuccess, isLoading } = useQuery({
    queryKey: ['useSecurityServiceLogin'],
    queryFn: () => {
      return SecurityService.login({
        brokerName: getBrokerKey(broker, ordinal),
        userName: userName,
        password: password,
        jolokiaHost: jolokiaHost,
        port: jolokiaPort,
        scheme: protocol,
      });
    },
    enabled: fireRequest,
    onSuccess: () => {
      const receivedToken = isSuccess ? data['jolokia-session-id'] : '';
      sessionStorage.setItem(getBrokerKey(broker, ordinal), receivedToken);
    },
  });

But I would prefer to use the mutation hook. Any idea on what I'm doing wrong?

Thanks

[seriouslag]

Typescript is reporting there are no 'options' property.

I recommend this vscode extension to help you understand typescript errors.
https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

useSecurityServiceLogin is a mutation, not a query; your example shows you calling it like a query.
Mutations are not like queries.

Check out this guide to mutations: https://tanstack.com/query/latest/docs/framework/react/guides/mutations

Right now, only GET requests are generated as queries in this library.
POST, PUT, DELETE are all generated as mutations.

I have a PR open that expands the documentation on using mutations. #97

Your component should look something like the following:

const LoginButton = ({
  userName,
  password,
  jolokiaHost,
  jolokiaPort,
  protocol,
  broker,
  ordinal,
}: LoginProps) => {
  const { mutate: loginMutation, isSuccess, isError, isPending } = useSecurityServiceLogin({
    onSuccess: (value) => {
      console.log('Login result', value);
    },
    onError: (error) => {
      console.error('Failed to login', error);
    },
  });
  
  const login = async () => {
    console.log('Attempting to login...');
    await loginMutation({
      brokerName: getBrokerKey(broker, ordinal),
      userName,
      password,
      jolokiaHost,
      port: jolokiaPort,
      scheme: protocol,
    });
  };

  const buttonText = isPending ? 'Logging in...' : 'Login';

  return (<button disabled={pending} onClick={() => login()}>{buttonText}</button>);
}

[lavocatt]

Thanks a lot, I'm going to give it a try.

[lavocatt]

I'm closing the issue as your answer resolved my question. Thanks!