Blitz
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
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 })
Blitz
BlitzOP•2y ago
Lesson: read the docs before posting a question

Did you find this page helpful?