Re-GETting the list is unnecessary: faster client, less server load

Created on 31 January 2025, 24 days ago

Overview

ui/src/services/codeComponents.ts was introduced in ✨ Managing code components in library Active and contains e.g.


    updateCodeComponent: builder.mutation<
      CodeComponent,
      { id: string; changes: Partial<CodeComponent> }
    >({
      query: ({ id, changes }) => ({
        url: `xb/api/config/js_component/${id}`,
        method: 'PATCH',
        body: changes,
      }),
      invalidatesTags: (result, error, { id }) => [
        { type: 'CodeComponents', id },
        { type: 'CodeComponents', id: 'LIST' },
      ],
    }),

(This uses https://redux-toolkit.js.org/rtk-query/usage/automated-refetching#invali...)

The end result is a correct UX (which is most important of course!).

But the list invalidation ({ type: 'CodeComponents', id: 'LIST' },) triggers an unnecessary request: the PATCH request's response body already contains the updated values.

Which means the list can actually be updated entirely client-side, because the listing doesn't have any ordering: it's a map/"object" (JS)/"associative array" (PHP) keyed by ID.