Blitz
Blitz12mo 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
Blitz12mo 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
Blitz12mo ago
Lesson: read the docs before posting a question