Ignore responses of outdated table fetches

src/slices/aclSlice.ts

@@ -73,6 +73,8 @@ export type AclDefaults = {
 type AclsState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	results: AclResult[],
 	columns: TableConfig["columns"],
 	total: number,
@@ -93,6 +95,7 @@ const initialColumns = aclsTableConfig.columns.map(column => ({
 const initialState: AclsState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	results: [],
 	columns: initialColumns,
 	total: 0,
@@ -338,11 +341,16 @@ const aclsSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchAcls.pending, state => {
+			.addCase(fetchAcls.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
 			// Pass the generated action creators to `.addCase()`
-			.addCase(fetchAcls.fulfilled, (state, action: PayloadAction<FetchAcls>) => {
+			.addCase(fetchAcls.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				// Same "mutating" update syntax thanks to Immer
 				state.status = "succeeded";
 				const acls = action.payload;
@@ -353,6 +361,10 @@ const aclsSlice = createSlice({
 				state.results = acls.results;
 			})
 			.addCase(fetchAcls.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.results = [];
 				state.error = action.error;

src/slices/eventSlice.ts

@@ -172,6 +172,8 @@ export type Conflict = {
 type EventState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	statusMetadata: "uninitialized" | "loading" | "succeeded" | "failed",
 	errorMetadata: SerializedError | null,
 	statusSchedulingInfo: "uninitialized" | "loading" | "succeeded" | "failed",
@@ -210,6 +212,7 @@ const initialColumns = eventsTableConfig.columns.map(column => ({
 const initialState: EventState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	statusMetadata: "uninitialized",
 	errorMetadata: null,
 	statusSchedulingInfo: "uninitialized",
@@ -1170,16 +1173,15 @@ const eventSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchEvents.pending, state => {
+			.addCase(fetchEvents.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
-			.addCase(fetchEvents.fulfilled, (state, action: PayloadAction<{
-				total: EventState["total"],
-				count: EventState["count"],
-				limit: EventState["limit"],
-				offset: EventState["offset"],
-				results: EventState["results"],
-			}>) => {
+			.addCase(fetchEvents.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "succeeded";
 				const events = action.payload;
 				state.total = events.total;
@@ -1189,6 +1191,10 @@ const eventSlice = createSlice({
 				state.results = events.results;
 			})
 			.addCase(fetchEvents.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.results = [];
 				state.error = action.error;

src/slices/groupSlice.ts

@@ -30,6 +30,8 @@ export type Group = {
 type GroupState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	results: Group[],
 	columns: TableConfig["columns"],
 	total: number,
@@ -48,6 +50,7 @@ const initialColumns = groupsTableConfig.columns.map(column => ({
 const initialState: GroupState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	results: [],
 	columns: initialColumns,
 	total: 0,
@@ -120,10 +123,15 @@ const groupSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchGroups.pending, state => {
+			.addCase(fetchGroups.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
-			.addCase(fetchGroups.fulfilled, (state, action: PayloadAction<FetchGroups>) => {
+			.addCase(fetchGroups.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "succeeded";
 				const groups = action.payload;
 				state.total = groups.total;
@@ -133,6 +141,10 @@ const groupSlice = createSlice({
 				state.results = groups.results;
 			})
 			.addCase(fetchGroups.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.error = action.error;
 			});

src/slices/jobSlice.ts

@@ -31,6 +31,8 @@ export type Job = {
 type JobState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	results: Job[],
 	columns: TableConfig["columns"],
 	total: number,
@@ -49,6 +51,7 @@ const initialColumns = jobsTableConfig.columns.map(column => ({
 const initialState: JobState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	results: [],
 	columns: initialColumns,
 	total: 0,
@@ -81,10 +84,15 @@ const jobSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchJobs.pending, state => {
+			.addCase(fetchJobs.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
-			.addCase(fetchJobs.fulfilled, (state, action: PayloadAction<FetchJobs>) => {
+			.addCase(fetchJobs.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "succeeded";
 				const jobs = action.payload;
 				state.total = jobs.total;
@@ -94,6 +102,10 @@ const jobSlice = createSlice({
 				state.results = jobs.results;
 			})
 			.addCase(fetchJobs.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.error = action.error;
 			});

src/slices/recordingSlice.ts

@@ -24,6 +24,8 @@ export type Recording = {
 type RecordingState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	results: Recording[],
 	columns: TableConfig["columns"],
 	total: number,
@@ -42,6 +44,7 @@ const initialColumns = recordingsTableConfig.columns.map(column => ({
 const initialState: RecordingState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	results: [],
 	columns: initialColumns,
 	total: 0,
@@ -142,16 +145,15 @@ const recordingSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchRecordings.pending, state => {
+			.addCase(fetchRecordings.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
-			.addCase(fetchRecordings.fulfilled, (state, action: PayloadAction<{
-				total: RecordingState["total"],
-				count: RecordingState["count"],
-				limit: RecordingState["limit"],
-				offset: RecordingState["offset"],
-				results: RecordingState["results"],
-			}>) => {
+			.addCase(fetchRecordings.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "succeeded";
 				const recordings = action.payload;
 				state.total = recordings.total;
@@ -161,6 +163,10 @@ const recordingSlice = createSlice({
 				state.results = recordings.results;
 			})
 			.addCase(fetchRecordings.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.error = action.error;
 			});

src/slices/seriesSlice.ts

@@ -65,6 +65,8 @@ export interface TobiraPage {
 type SeriesState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	statusMetadata: "uninitialized" | "loading" | "succeeded" | "failed",
 	errorMetadata: SerializedError | null,
 	statusThemes: "uninitialized" | "loading" | "succeeded" | "failed",
@@ -96,6 +98,7 @@ const initialColumns = seriesTableConfig.columns.map(column => ({
 const initialState: SeriesState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	statusMetadata: "uninitialized",
 	errorMetadata: null,
 	statusThemes: "uninitialized",
@@ -435,10 +438,15 @@ const seriesSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchSeries.pending, state => {
+			.addCase(fetchSeries.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
-			.addCase(fetchSeries.fulfilled, (state, action: PayloadAction<FetchSeries>) => {
+			.addCase(fetchSeries.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "succeeded";
 				const series = action.payload;
 				state.total = series.total;
@@ -448,6 +456,10 @@ const seriesSlice = createSlice({
 				state.results = series.results;
 			})
 			.addCase(fetchSeries.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.error = action.error;
 			})

src/slices/serverSlice.ts

@@ -29,6 +29,8 @@ export type Server = {
 type ServerState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	results: Server[],
 	columns: TableConfig["columns"],
 	total: number,
@@ -47,6 +49,7 @@ const initialColumns = serversTableConfig.columns.map(column => ({
 const initialState: ServerState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	results: [],
 	columns: initialColumns,
 	total: 0,
@@ -100,10 +103,15 @@ const serverSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchServers.pending, state => {
+			.addCase(fetchServers.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
-			.addCase(fetchServers.fulfilled, (state, action: PayloadAction<FetchServers>) => {
+			.addCase(fetchServers.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "succeeded";
 				const servers = action.payload;
 				state.total = servers.total;
@@ -113,6 +121,10 @@ const serverSlice = createSlice({
 				state.results = servers.results;
 			})
 			.addCase(fetchServers.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.error = action.error;
 			});

src/slices/serviceSlice.ts

@@ -33,6 +33,8 @@ export type Service = {
 type ServiceState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",
 	error: SerializedError | null,
+	// ID of the most recent fetch, to ignore responses of older overlapping fetches
+	latestRequestId: string,
 	results: Service[],
 	columns: TableConfig["columns"],
 	total: number,
@@ -51,6 +53,7 @@ const initialColumns = servicesTableConfig.columns.map(column => ({
 const initialState: ServiceState = {
 	status: "uninitialized",
 	error: null,
+	latestRequestId: "",
 	results: [],
 	columns: initialColumns,
 	total: 0,
@@ -103,10 +106,15 @@ const serviceSlice = createSlice({
 	// These are used for thunks
 	extraReducers: builder => {
 		builder
-			.addCase(fetchServices.pending, state => {
+			.addCase(fetchServices.pending, (state, action) => {
 				state.status = "loading";
+				state.latestRequestId = action.meta.requestId;
 			})
-			.addCase(fetchServices.fulfilled, (state, action: PayloadAction<FetchServices>) => {
+			.addCase(fetchServices.fulfilled, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "succeeded";
 				const acls = action.payload;
 				state.total = acls.total;
@@ -116,6 +124,10 @@ const serviceSlice = createSlice({
 				state.results = acls.results;
 			})
 			.addCase(fetchServices.rejected, (state, action) => {
+				// Ignore responses of older fetches that finished after a newer one started
+				if (action.meta.requestId !== state.latestRequestId) {
+					return;
+				}
 				state.status = "failed";
 				state.error = action.error;
 			});