Why have per-item tags, if edit causes the entire list to re-fetch

[rpasechnikov]

Hi all,

I'm just getting familiar with RTK Query, currently going through this part https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#invalidating-specific-items and following along with my own project.

I've got a itemApiSlice set up. What I noticed is that after editing a single item, all of my items are getting re-fetched. Now I understand that that is was a design decision. What I'm not clear about, is that why would the documentation recommend having a per-item tag, if we will never be doing a per-item, partial, re-fetch?

For example:

const itemsApiSlice = baseApi.injectEndpoints({
  endpoints: (builder) => ({

    // GET /api/items - Get all items
    getItems: builder.query<ApiResponse<Item[]>, void>({
      query: () => "/items",

      // Per-item tags, allows individual item invalidation
      // See more: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#invalidating-specific-items
      providesTags: (result, _error, _arg) => [
        SLICE_ENTITY_TYPES.Item,
        ...result?.data?.map(({ id }) => ({ type: SLICE_ENTITY_TYPES.Item, id })) ?? []
      ]
    }),

    // GET /api/items/:id - Get single item
    getItem: builder.query<ApiResponse<Item>, string>({
      query: (id) => `/items/${id}`,
      providesTags: (_result, _error, id) => [{ type: SLICE_ENTITY_TYPES.Item, id }],
    }),

    // POST /api/items - Create new item
    createItem: builder.mutation<ApiResponse<Item>, CreateItemRequest>({
      query: (newItem) => ({
        url: "/items",
        method: "POST",
        body: newItem,
      }),

      // Invalidate the entire list to refetch after creating
      invalidatesTags: [{ type: SLICE_ENTITY_TYPES.Item }],
    }),

    // PUT /api/items/:id - Update existing item
    updateItem: builder.mutation<ApiResponse<Item>, { id: string; updates: UpdateItemRequest }>({
      query: ({ id, updates }) => ({
        url: `/items/${id}`,
        method: "PUT",
        body: updates,
      }),
      // Invalidate both the specific item and the ENTIRE LIST
      // See more: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#invalidating-specific-items
      // ??? Why do we want per-item tags in getItems then? What's the point? ???
      invalidatesTags: (_result, _error, { id }) => [
        { type: SLICE_ENTITY_TYPES.Item, id },
      ],
    }),
// ...
});

[phryneas]

The job of RTK Query is to deal with all kinds of REST endpoints - and most REST endpoints are designed in a way that doesn't lend itself to things like normalization, so something like a "partial refetch" is impossible.
It's a deliberate design choice that RTK Query only tries to mirror the state of the server, and refetches endpoints it knows are outdated in the browser.

Things like normalization work better in a client that can make very specific assumptions about the API, e.g. a GraphQL client like Apollo Client - and in those cases you can also do selective cache updates and/or refetches.

But a general API client like RTK Query cannot make any of those assumptions, so it has to fall back to the most common behavior.

So the point of per-item tags is really just so you can identify which cache entries will need refetching if something specific changes.

[phryneas]

Oh, looking more at your example now... imagine getItems starts getting paginated. At some point you probably just want to reload page 2 if you update item 26, but not pages 1,3,4 and 5 that are also in the cache - you didn't change them.

[rpasechnikov]

Thanks for your response and explanation!

I'm still not 100% clear, unfortunately, although I think I do understand what you mean in your initial response. What I don't understand is that you are saying that "partial refetch is impossible" in the first response, but then using an example of refretching a specific page in your follow up response. Are those not at odds with one another?

If not - how would you invalidate tags for a specific page worth of items only? How would the providesTags and invalidatesTags look like for the GET and PUT endpoints?

Thanks in advance 😄

Current config for me:

// GET
providesTags: (result, _error, _arg) => [
  SLICE_ENTITY_TYPES.Item,
  ...result?.data?.map(({ id }) => ({ type: SLICE_ENTITY_TYPES.Item, id })) ?? []
]

// PUT
invalidatesTags: (_result, _error, { id }) => [
  { type: SLICE_ENTITY_TYPES.Item, id },
],

[phryneas]

"one page" is a full API response. We never mix API responses or pick them apart. So if you had an endpoint like

    getItems: builder.query<ApiResponse<Item[]>, { page: number }>({
      query: ({page}) => `/items/${page}`,

      // Per-item tags, allows individual item invalidation
      // See more: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#invalidating-specific-items
      providesTags: (result, _error, _arg) => [
        SLICE_ENTITY_TYPES.Item,
        ...result?.data?.map(({ id }) => ({ type: SLICE_ENTITY_TYPES.Item, id })) ?? []
      ]
    }),

you could fetch multiple pages independently - and they can coexist in the cache at the same time.

And then you invalidate a specific id that's on page 2, but not on page 3 and page 2 will refetch, but page 3 won't.

[rpasechnikov]

That makes perfect sense - thanks so much for such a clear explanation :)