TTC
Theo's Typesafe Cult•16mo ago
Kirik

'id' does not exist in type 'UseTRPCMutationOptions<{ id: string; title?: string | undefined; ...

in pages/quest/[id].tsx 
type Props = {
  quest: QuestWithObjectives;
  onClose: () => void;
};
export const QuestEditForm = ({ quest, onClose }: Props) => {
  const { register, handleSubmit, formState } = useForm({
    defaultValues: {
      id: quest.quest.id,
      title: quest.quest.title,
      rating: quest.quest.rating,
      ...
    },
  });

const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
       api.quests.update.useMutation({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
type Props = {
  quest: QuestWithObjectives;
  onClose: () => void;
};
export const QuestEditForm = ({ quest, onClose }: Props) => {
  const { register, handleSubmit, formState } = useForm({
    defaultValues: {
      id: quest.quest.id,
      title: quest.quest.title,
      rating: quest.quest.rating,
      ...
    },
  });

const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
       api.quests.update.useMutation({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
My router: 
update: privateProcedure
  .input(
    z.object({
      id: z.string(),
      title: z.string().min(1).max(280).optional(),
      rating: z.number().min(1).max(5).optional(),
     ...
    })
  )
  .mutation(async ({ ctx, input }) => {
    const authorId = ctx.userId;
    const { success } = await ratelimit.limit(authorId);
    ...
update: privateProcedure
  .input(
    z.object({
      id: z.string(),
      title: z.string().min(1).max(280).optional(),
      rating: z.number().min(1).max(5).optional(),
     ...
    })
  )
  .mutation(async ({ ctx, input }) => {
    const authorId = ctx.userId;
    const { success } = await ratelimit.limit(authorId);
    ...
I've also tried setting types for const onSubmit = async (data: Type) => { with 
type Quest = RouterOutputs["quests"]["getOne"][0];
type QuestUpdateInput = {
  id: string;
  title?: string;
  rating?: number;
  ...
  objectives?: {
    obj: string;
    location: string;
    ingredients: string;
    requiredAmount: number;
  }[];
};

type UseMutationType = typeof api.quests.update.useMutation;

type QuestUpdateMutationInput = Parameters<UseMutationType>[0];
type QuestUpdateMutation = ReturnType<typeof api.quests.update.useMutation>;
type Quest = RouterOutputs["quests"]["getOne"][0];
type QuestUpdateInput = {
  id: string;
  title?: string;
  rating?: number;
  ...
  objectives?: {
    obj: string;
    location: string;
    ingredients: string;
    requiredAmount: number;
  }[];
};

type UseMutationType = typeof api.quests.update.useMutation;

type QuestUpdateMutationInput = Parameters<UseMutationType>[0];
type QuestUpdateMutation = ReturnType<typeof api.quests.update.useMutation>;
Solution:
Hi, friend I don't know if this will fix you problema but what you are doing here is very problematic: ```tsx const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {...
Jump to solution
3 Replies
Solution
FelipeEmos
FelipeEmos•16mo ago
Hi, friend I don't know if this will fix you problema but what you are doing here is very problematic: 
const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
       // DOWN HERE
       api.quests.update.useMutation({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
       // DOWN HERE
       api.quests.update.useMutation({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
Hooks should be called in a predictable order and in the main flow of your component function. In other words, do not call a hook inside a function, inside a if statement or inside a for statement.. You gotta try something like the following: 
const { mutateAsync } = api.quests.update.useMutation();

const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
        await mutateAsync({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
const { mutateAsync } = api.quests.update.useMutation();

const onSubmit: SubmitHandler<QuestUpdateInput> = async (data) => {
    
    try {
        await mutateAsync({
        id: quest.quest.id, // ISSUE HERE
        title: data.title,
        rating: data.rating,
        rating_denominator: data.rating_denominator,
        reward_xp: data.reward_xp,
        goal: data.goal,
        target: data.target,});
      onClose();
    } catch (error) {
      setUpdateError('Failed to update quest');
    }
  };
Kirik
KirikOP•16mo ago
Thanks! Javascript sure has a way of doing things. I appreciate the help 🙏
FelipeEmos
FelipeEmos•16mo ago
You are welcome.... But @instancer_kirik , be mindful this is not a Javascript thing... this is a React thing. If you are in the mood, I highly suggest you take a time to study how hooks work under the hood. Hooks shouldn't work, that's the catch. React deals with them in a very special way and that's why we always need to name our hooks starting with use, like useQuests could be your custom hook. Hooks have the power to persist data across renders.... that's not something common to functions, that's something common to classes and objects. So in order for hooks to do what they do it's mandatory to call them always in the same order, usually on the top of your component ( which guarantees that ), but never on a conditional basis ( like inside a if or a for loop ) If you are using ESLint, I also recommend turning on the following rule: 
"react-hooks/rules-of-hooks": "error",
"react-hooks/rules-of-hooks": "error",
It will show you an error if you try to use hooks in a scatchy way... There are some ways of using hooks that this rule is not capable of saying it's valid, but of course if this rule says it's good and doesn't throw you an error... then you are for sure in a nice spot 🙂
Want results from more Discord servers?
Add your server