Why my useMutation is using the old value of new Date() when onClick?-CodePudding

One of my useMutation hook variable (startDateTime) is supposed to calculate the date when I call the mutate function. More specifically, when an onClick event is called. Instead, my mutate function takes the date calculated at render. Why is that?

I tried to store the date value in a useState() hook also and get the same result.

import { START_SESSION } from "@graphql/newSession";
import { useMutation } from "@apollo/client";
import { useAuth0 } from "@auth0/auth0-react";
import { clientDateToday, clientTimeNow } from "@modules/common/helper";

interface startNewSessionVariables {
  id: number;
  userName: string;
  sessionTitle: string;
  sessionCreateDate: string;
  startdateTime: Date;
}

export const useStartSession = (sessionTitle: string) => {
  const { user } = useAuth0();

  let userName;
  if (user) {
    userName = user.name;
  }

  const [startNewSession, { data, loading, error }] = useMutation<{
    startNewSession: startNewSessionVariables;
  }>(START_SESSION, {
    variables: {
      userName,
      sessionTitle,
      sessionCreateDate: clientDateToday(),
      startDateTime: clientTimeNow(),
    },
  });

  return { startNewSession, result: data, loading, error };
};

Function in Higher Order component:

function startSession(): void {
    //create new session in db
    startNewSession();
    //start the timer
    toggleActive();
  }

Button that is calling mutate function:

import ToggleButton from "../common/ToggleButton";

interface toggleProps {
  toggleIsActive: boolean;
  toggleOnPause: boolean;
  finishSession(): void;
  startSession(): void;
}
const ToggleComponent = ({ toggleIsActive, toggleOnPause, finishSession, startSession }: toggleProps) => {
  let buttonAction;
  let buttonName: string;

  if (toggleIsActive || toggleOnPause) {
    buttonAction = finishSession;
    buttonName = "End Session";
  } else {
    buttonAction = startSession;
    buttonName = "Start";
  }

  return (
    <div className="text-center mt-5">
      <ToggleButton onToggle={buttonAction} btnName={buttonName} />
    </div>
  );
};

export default ToggleComponent;

CodePudding user response：

You are defining your mutation with a set of variables but later when you actually invoke it you are not providing an updated set. When you invoke startMutation in your other component, include the updated variables:

() => startMutation({
  variables: {
    userName,
    sessionTitle,
    sessionCreateDate: clientDateToday(),
    startDateTime: clientTimeNow(),
  }
})

As you might have guessed, defining those variables when you originally created the mutation isn't all that helpful if they are to change later.

ps. Unless you really want the client's date and time to be stored on the server it's always better to just have the server provide the current date & time thereby avoiding the need to pass it from the client as mutation variables as well as the possibility of wonky or malicious values.