I have a situation using rtk about how to use the mutations and queries sequentially.
In my use case, in a route like /status/:id/:version
, I need to create a job based on Id and version and then monitor the progress of creation (takes around 30 seconds). I have a query and a mutation in this route
const {id, version} = useParams()
const pollRef = useRef(1000)
const [createJob, {data: postData, error, isSuccess}] = useCreateJobMutation()
const {data, ...} = useGetJobIdQuery(postData[0].id, { pollingInterval: pollRef.current })
if (data.progress === 100) {
pollRef.current = 0 // stop polling GET route
use data ...
}
useEffect(()=> {
createJob(newJob) // newJob is created based on id, version
}, [])
I need to wait for the postData to be valid (not undefined), the issue is how to send the result of the mutation to the query without violating the hook rules. (I get ERROR Rendered more hooks during the previous render.)
if (isSuccess) {
useGetJobIdQuery(...) // violate hook rules
}
useCreateJobMutation()
and useGetJobIdQuery()
work fine standanlone but not together
You can skip queries:
import { skipToken } from '@reduxjs/toolkit/query/react'
useGetJobIdQuery(isSuccess ? jobId : skipToken)