I understand whats causing the error in my code, im checking if id is defined before calling useQuery as it requires it to be passed in. const Update = () = { const router = useRouter() const { id } = router.query if (!id) return <Invalid ID const readOneQuery = procedures.readOne.useQuery({ id: id as string }) if (readOneQuery.isLoading) return if (readOneQuery.isError) return <Something went wrong while fetching data return <FormBuilder type="update" model={model} procedures={procedures} currentId={id as string} prefill={readOneQuery.data} / } How do i make sure useQuery is only called when is becomes defined, but in the same time calling it before the null check of id?

❓-help

avoiding used more hooks than previous render

Bblitzjb

7/25/2023

I understand whats causing the error in my code, im checking if id is defined before calling useQuery as it requires it to be passed in.

const Update = () => {
    const router = useRouter()
    const { id } = router.query
    if (!id) return <>Invalid ID</>
    
    const readOneQuery = procedures.readOne.useQuery({ id: id as string })
    
    if (readOneQuery.isLoading) return <ScreenLoader />
    if (readOneQuery.isError) return <>Something went wrong while fetching data</>


    return <FormBuilder type="update" model={model} procedures={procedures} currentId={id as string} prefill={readOneQuery.data} />

}

const Update = () => {
    const router = useRouter()
    const { id } = router.query
    if (!id) return <>Invalid ID</>
    
    const readOneQuery = procedures.readOne.useQuery({ id: id as string })
    
    if (readOneQuery.isLoading) return <ScreenLoader />
    if (readOneQuery.isError) return <>Something went wrong while fetching data</>


    return <FormBuilder type="update" model={model} procedures={procedures} currentId={id as string} prefill={readOneQuery.data} />

}

How do i make sure useQuery is only called when is becomes defined, but in the same time calling it before the null check of id?

Solution:

Solutionpass enabled: condition in useQuery options ```ts procedures.readOne.useQuery({ id: id as string }, { enabled: id !== undefined })...

Jump to solution

Solution

Bblitzjb

7/25/2023

Solutionpass enabled: condition in useQuery options

procedures.readOne.useQuery({ id: id as string }, { enabled: id !== undefined })

procedures.readOne.useQuery({ id: id as string }, { enabled: id !== undefined })

Bblitzjb

7/25/2023

Lesson: read the docs before posting a question

Looking for more? Join the community!

❓-help

❓-help

Recommended Posts

How would batching result in a single database query?On the `httpBatchStreamLink` docs it says that multiple query calls could result in a single databas TS error cause Query is not returning correct type to the client!So Ive build a query which return a type called Employee, for example. on my client I've props which Typescript helper for router outputis there a helper to do this better? Get the output for a certain route? Or is this the way to do it Am I able to use "multer" with trpc?Im currently trying to implement file uploads within a T3 app using S3. I am following along with a Losing type inference in vs-codeHey, I'm having quite some trouble with type inference today. I create my client inside of function How would you implement basic auth session tokens with tRPC?I'm building a hobby app which requires basic auth. I'm used to use **express **and **express-sessio Example for tRPC, stable version, with RSCHi This may be a stupid question... The readme of the experimental example mentions > Note You Dynamic return typeIs there any way to have dynamic return type with tRPC? Simple example: If I provide x: true on bo Sometimes invalidate not work...hello sometimes invalidate method does not work in `onSuccess` anyone same? using NextJS, pnpm trpc client request size limits?I am sending a pretty sizable request and am seeing ``` [TRPCClientError: JSON Parse error: Unexpec