Blitz•2y ago

avoiding used more hooks than previous render

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:

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

Jump to solution

2 Replies

Solution

Blitz•2y ago

Solution pass 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 })

BlitzOP•2y ago

Lesson: read the docs before posting a question