T
TanStack•2y ago
generous-apricot

State property not wanting to accept new parameters and needed a type casting when using!

const mutation = useMutation({
    mutationFn: registerUser,
    onSuccess: (data: AxiosResponse, variables: RegisterUserRequest) => {
      navigate({
        to: "/auth/verify",
        state: {
          email: variables.email,
        } as NonNullableUpdater<HistoryState>,
      });
      triggerNotification(data.status.toString(), data.data.message);
    },
    onError: (error: AxiosError) => {
      if (error.response) {
        triggerNotification(error.response.status.toString(), (error.response as AxiosResponse).data);
      } else {
        triggerNotification("info", error.message);
      }
    },
const mutation = useMutation({
    mutationFn: registerUser,
    onSuccess: (data: AxiosResponse, variables: RegisterUserRequest) => {
      navigate({
        to: "/auth/verify",
        state: {
          email: variables.email,
        } as NonNullableUpdater<HistoryState>,
      });
      triggerNotification(data.status.toString(), data.data.message);
    },
    onError: (error: AxiosError) => {
      if (error.response) {
        triggerNotification(error.response.status.toString(), (error.response as AxiosResponse).data);
      } else {
        triggerNotification("info", error.message);
      }
    },
on trying to do this everything is working fine but i have to typecast the state for passing new value to the next route! Why is that ? Isn't state made for passing props to the next route?? and other thing is how will I access This new state that I pased in my next route? 
export const Route = createFileRoute("/auth/verify")({
  component: VerificationPage,
});
export const Route = createFileRoute("/auth/verify")({
  component: VerificationPage,
});
can I acces it directly from here or i need to use something like useRouter?
1 Reply
generous-apricot
generous-apricotOP•2y ago
for now i am solving it like this: extend the modification: 
declare module "@tanstack/react-router" {
  interface HistoryState {
    email?: string; // Add your new property here
  }
}
declare module "@tanstack/react-router" {
  interface HistoryState {
    email?: string; // Add your new property here
  }
}
pass it: 
 navigate({
        to: "/auth/verify",
        state: {
          email: variables.email,
        },
      });
 navigate({
        to: "/auth/verify",
        state: {
          email: variables.email,
        },
      });
use it: 
const {
    state: {
      location: { state },
    },
  } = useRouter();

  console.log(state);
const {
    state: {
      location: { state },
    },
  } = useRouter();

  console.log(state);

Did you find this page helpful?