TanStackT
TanStack•16mo ago•
6 replies
radical-lime

Pattern for mutations that trigger queries and further mutations

Hello all so using react query v4. Still fairly new to it and trying to figure out the best practices. I have a submit command that will need to do the following;

1. calls an api with a payload and that api runs an async task to update
2. polls another api to see status of the async job above
3. once poll completes with a status of success update another api with the payload
4. once that update is complete fetch data for other api's


Code wise without reactQuery it'd be something like

const someApiCall = async(data) => {
    // 1. calls an api with a payload and that api runs an async task to update
    const {id} = creationApi(data)
    
    // 2. polls another api to see status of the async job above
    let isComplete = false;
    if (!isComplete) {
        const status = await apiToPoll(id)
        if (status === 'error') {
            throw new Error('goodbye world')
        } else if (status !== 'inProgress') {
          isComplete = true
        } else {
           // delay for x ms
        }
    }

    // 3. once poll completes with a status of success update another api with the payload
    await updateOtherResourcesApi(id)

    // 4. once that update is complete fetch data for other api's
    const result = fetchDataApi(id)

    // set result of fetch
    setResult(result) // redux, local state, or whatever
}
Was this page helpful?