Prevent query from running after query key changed

[antonisprovidakis]

Let's say my app uses the route: /jobs/:jobId/stage/:stageSlug.

On mount, I have to perform two requests simultaneously:

1. a request to fetch job related data. This data also contains an array of the available Stages: {id: number, slug: string}[]
2. a request to an endpoint that ultimately needs a stage_id. This endpoint can also receive a stage_slug (instead of the stage_id), however the BE has to first resolve it to a stage_id and then do the actual work. Which obviously is slower, thus the stage_id is preferred when available.

So, request (1) fires off, and at the same time request (2) fires off using the stage_slug which is immediately available through the url params.

Code looks something like this:

const {jobId, stageSlug} = params; 

const {data: job} = useJob(jobId);
const stages =  job?.stages || [];

const stage = stages.find(stage => stage.slug === stageSlug);
const stageSlugOrStageId = stage?.id !== undefined ? {stageId: stage.id} : {stageSlug}

const query = useRequest2Query({jobId, stageSlugOrStageId}) // both params are passed to the query key and the query fn.

However, while request (2) is on fligh, request (1) resolves and now I have access to the job's stages.
So, since stage exists, it means that stage_id exists, thus stageSlugOrStageId will be:

const stageSlugOrStageId = {stageId: stage.id}

and it will be passed to the query, and since the query key changed it will cause the previous request to be cancelled and perform a new request, but this time with the stage_id, instead of the stage_slug.

As you can understand this introduces a delay and multiple requests, which is not good.

So my question is:
Is there a way to avoid this? Maybe prevent the request with the stage_id to be performed until the request with the stage_slug is completed? Or avoid the request altogether?

[TkDodo]

sounds like you want to disable the second query until the first query has finished ?

https://tanstack.com/query/v4/docs/react/guides/dependent-queries

[antonisprovidakis]

It makes sense, but that will introduce some minor delay.
However the goal is to be as fast as possible.
I mean, I do have the stage_slug already available (url params), why should I wait until I "discover" its id.

In an imperative world that would be totally feasible, without too much hustle:
"Make the first request with the stage_slug and every time you have to perform the same request, use the stage_id, if available."

[TkDodo]

interesting. what you can do is:

• run the query with the slug only
• in the queryFn, make a lookup via queryClient.getQueryData on the job query
• use the id for the request if you find it, otherwise, use the slug

that way, you would only have one query, which always has the slug in the QueryKey, and you potentially "translate" it to an id right before the request.

[antonisprovidakis]

Sounds good. Nice idea!
I'll give a try some time soon.

Thanks a lot @TkDodo 🙏

[antonisprovidakis]

@TkDodo It worked like a charm 🎖️
Thanks again!