How to invalidate tag for a endpoint with a certain parameter header?

[nihalshetty0]

I am using RTK query for my application. My application has infinite scroll and I am using something like this to concat newer page with older pages.

getJobs: builder.query<
        PaginatedResponse<JobType>, 
        JobFilterParamType
    >({
    query: (params) => ({
        url: `${jobRequirement}/`,
        params,
    }),
    serializeQueryArgs: ({ queryArgs }) => {
        //reference: https://rohitbels.medium.com/pagination-infinite-loading-with-redux-toolkit-createapi-a265ac25c3bd
        const newQueryArgs = { ...queryArgs };
        if (newQueryArgs.page) {
            delete newQueryArgs.page;
        }
        return newQueryArgs;
    },
    merge: (currentCache, newItems) => {  //summary: merge old page with new page
        if (currentCache.results) {
            return {
                ...currentCache,
                ...newItems,
                results: [...currentCache.results, ...newItems.results],
            };
        }
        return newItems;
    },
    providesTags: (data) => data ? [{ type: "Jobs", id: "LIST" }] : [{ type: "Jobs", id: "LIST" }], //TODO: handle error
})

Just for reference, I am receiving the data from the API, as such:

{
  count: 30;
  next: 'https://..../?page=2';
  previous: null;
  results: [{...}, {...}, ...];
}

Since, I am doing this, on patch of an item from this list, I can't just invalidate the getJobs endpoint, as it would remove all the page but page 1 from UI.

Therefore, I am handling the item update as such:

patchJob: builder.mutation<
        JobType,
        Partial<JobType>
    >({
    query: ({id, ...data}) => ({
        url: `${jobRequirement}/${id}`,
            method: "POST",
            body: data,
        }),
    async onQueryStarted(data, { dispatch, queryFulfilled }) {
       
        const filter = store.getState().jobFilter; // this is a slice, where job filter data is stored
        const patchResult = dispatch(
            api.util.updateQueryData("getJobs", filter, (draft) => {
                const indexOfUpdatedJob = draft.results.findIndex((job) => job.id === data.job_requirement);
          
            draft.results[indexOfUpdatedJob] = data; <b> //summary: updating item </b>
            })
        );
        try {
          await queryFulfilled;
        } catch {
          patchResult.undo();
        }
      },
      invalidatesTags: (result) => {
        return result ? [{ type: "Jobs", id: result.job_requirement }] : [];
      },
})

The above code works perfectly well

Now, this issue is, let's say I have not added any filter, and the endpoint is /jobs?page=1 and later, I add a filter like /jobs?page=1&skill=123. Now both endpoint are cached. If, I were to make any changes in item, when user is on /jobs?page=1 and that item also happens to exist on /jobs?page=1&skill=123, then this item will only update /jobs?page=1 cache and not in /jobs?page=1&skill=123 cache.

I cannot invalidate the getJobs endpoint because the jobs list and patch jobs item are on the same page. If I were to invalidate it, then the list would refresh, every time a job item is changed and the scroll would jump up.

Solution I can think of is to:

1. Update the item in all the endpoint header variant. Now we are doing it for just /jobs?page=1. Need to also, do this for /jobs?page=1&skill=123 as well
2. Or invalidate all other endpoint variant, except the one the user is currently on.

I want to know how we can do the above, in RTK. Any of the two method is fine.

Thanks.