Ok, so what am I missing

I get a

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. when the changeFeildValue handler is fired.

import React from "react"; import { useRouter } from 'next/router' import { trpc } from "../../utils/trpc"; import Profile from "../../components/profile";

export default function Party() {
const { query } = useRouter(); const f = ${query.id} if(!query.id) return const { data: uzer, refetch, isLoading, } = trpc.people.getPersonById.useQuery({id: query.id.toString()},{ refetchInterval: false, refetchOnReconnect: false, refetchOnWindowFocus: false, });
const changeFeildValue = (idx: string, newVal: string) => {
trpc.people.useMutation.useQuery({idx: idx, nu: newVal } ); } if(!uzer) return (<div>load</div>) return <Profile user={uzer} handleChange={changeFeildValue}></Profile> ) }

9 Replies

barry•3y ago

You don’t call it conditionally It needs to be called on every render Put the early return below the call

Matvey•3y ago

don't use useQuery for mutations

barry•3y ago

And that didn’t see that please format your code next time instead of

this

Matvey•3y ago

```ts code here ```

ibamseyOP•3y ago

wow, that's better... will do so, to summariies, a) should use useQuery b) need to call on every render @Ronan I think I am using a mutation in my router. But perhaps I'm not understanding. Here's the router

 ...export const peopleRouter = router({
    
    getPersonById: publicProcedure
    .input(
      z.object({
        id: z.string(),
      }),
    )
    .query(({ ctx , input}) => {
      return ctx.prisma.user.findFirst({
        where: { 
          id: input.id
        }
      });
    }),
    useMutation: publicProcedure
    .input(
      z.object({
        idx: z.string(),
        nu: z.string(),
      }),
    )
    .query(({ ctx , input }) => {
      return ctx.prisma.user.update({
        data: {
          firstname: input.nu
        },
        where: { 
          id: input.idx
        }
      });
    }),

 ...export const peopleRouter = router({
    
    getPersonById: publicProcedure
    .input(
      z.object({
        id: z.string(),
      }),
    )
    .query(({ ctx , input}) => {
      return ctx.prisma.user.findFirst({
        where: { 
          id: input.id
        }
      });
    }),
    useMutation: publicProcedure
    .input(
      z.object({
        idx: z.string(),
        nu: z.string(),
      }),
    )
    .query(({ ctx , input }) => {
      return ctx.prisma.user.update({
        data: {
          firstname: input.nu
        },
        where: { 
          id: input.idx
        }
      });
    }),

Matvey•3y ago

please format it

peopleRouter = router({

    getPersonById: publicProcedure
    .input(
      z.object({
        id: z.string(),
      }),
    )
    .query(({ ctx , input}) => {
      return ctx.prisma.user.findFirst({
        where: { 
          id: input.id
        }
      });
    }),
    useMutation: publicProcedure
    .input(
      z.object({
        idx: z.string(),
        nu: z.string(),
      }),
    )
    .query(({ ctx , input }) => {
      return ctx.prisma.user.update({
        data: {
          firstname: input.nu
        },
        where: { 
          id: input.idx
        }
      });
    }),

peopleRouter = router({

    getPersonById: publicProcedure
    .input(
      z.object({
        id: z.string(),
      }),
    )
    .query(({ ctx , input}) => {
      return ctx.prisma.user.findFirst({
        where: { 
          id: input.id
        }
      });
    }),
    useMutation: publicProcedure
    .input(
      z.object({
        idx: z.string(),
        nu: z.string(),
      }),
    )
    .query(({ ctx , input }) => {
      return ctx.prisma.user.update({
        data: {
          firstname: input.nu
        },
        where: { 
          id: input.idx
        }
      });
    }),

ibamseyOP•3y ago

i'm struggling with that! apologise

Matvey•3y ago

it's not a mutation, you added a query named useMutation but it's still a query

peopleRouter = router({

    getPersonById: publicProcedure
    .input(
      z.object({
        id: z.string(),
      }),
    )
    .query(({ ctx , input}) => {
      return ctx.prisma.user.findFirst({
        where: { 
          id: input.id
        }
      });
    }),
    updateFirstname: publicProcedure
    .input(
      z.object({
        idx: z.string(),
        nu: z.string(),
      }),
    )
    .mutation(({ ctx , input }) => {
      return ctx.prisma.user.update({
        data: {
          firstname: input.nu
        },
        where: { 
          id: input.idx
        }
      });
    }),

peopleRouter = router({

    getPersonById: publicProcedure
    .input(
      z.object({
        id: z.string(),
      }),
    )
    .query(({ ctx , input}) => {
      return ctx.prisma.user.findFirst({
        where: { 
          id: input.id
        }
      });
    }),
    updateFirstname: publicProcedure
    .input(
      z.object({
        idx: z.string(),
        nu: z.string(),
      }),
    )
    .mutation(({ ctx , input }) => {
      return ctx.prisma.user.update({
        data: {
          firstname: input.nu
        },
        where: { 
          id: input.idx
        }
      });
    }),

this is the mutation publicProcedure.input(...).mutation(...)

ibamseyOP•3y ago

got ya, thanks for the help.

Gaming

Programming

Ok, so what am I missing