RTK Query - Collection and single entity sync

[maloguertin]

Hi guys, I'm looking into migrating our codebase to use RTK Query however theres a pretty simple use case that I would like to understand how you guys would handle it:

export const productsApi = createApi({
  reducerPath: 'api',
  tagTypes: ['products'],
  baseQuery: dynamicBaseQuery,
  endpoints: builder => ({
    getAllProducts: builder.query({
      providesTags: result =>
        result
          ? [
              ...result.ids.map(id => ({ type: 'products', id })),
              { type: 'products', id: 'LIST' },
            ]
          : [{ type: 'products', id: 'LIST' }],
      query: () => 'products',
      transformResponse(response) {
        return productsAdapter.addMany(
          productsAdapter.getInitialState(),
          response
        )
      },
    }),
    getProductById: builder.query({
      providesTags: result =>
        result
          ? [
              { type: 'products', id: result.id },
              { type: 'products', id: 'LIST' },
            ]
          : [{ type: 'products', id: 'LIST' }],
      query: (id) =>
        `products/${id}`,
      transformResponse(response) {
        return productsAdapter.addOne(
          productsAdapter.getInitialState(),
          response
        )
      },
    }),
  }),
})

With this kinda of API and with 2 different components that could appear at the same time:

ComponentA (A list of products that fetches all the products to display them)

ComponentB (A side panel that fetches a single product to display it's details)

How would you proceed to make it so that when ComponentB fetches a product the ComponentA updates if this specific product changed so that it's not confusing for the end user?

• If i invalidate the cache when receiving the product if it changed it triggers a full refetch which can be a lot of data
• I could use the method described here: https://redux-toolkit.js.org/rtk-query/usage/queries#selecting-data-from-a-query-result but I can't guarantee that the products will be fetched when I display the details component and it could be used elsewhere.

I'm sure this is a pretty common use case and I just wanted to know how you guys would do it!

[maximforever]

Just wanted to chime in that I had the same question/problem and also thought it was a common use case! Asked my question here.

[Shrugsy]

FYI I replied to @maximforever's question here, which looks like it is applicable to this question also.

In regards to these specific questions:

If i invalidate the cache when receiving the product if it changed it triggers a full refetch which can be a lot of data

In many cases it's fine to refetch the whole list when just one item is expected to have changed, but if you want to avoid that request, you can use manual cache updates such as optimistic updates to update the existing cache entry in the list directly, either by using:

• your expected data, and rolling back/re-fetching on mutation failure (optimistic)
• the data received from the mutation response after awaiting for it (pessimistic)

For this solution, you wouldn't use invalidateTags (except to potentially re-fetch on mutation failure), so it avoids re-fetching the list.

I could use the method described here: https://redux-toolkit.js.org/rtk-query/usage/queries#selecting-data-from-a-query-result but I can't guarantee that the products will be fetched when I display the details component and it could be used elsewhere.

I'm not sure exactly what you're referring to as an issue here. If you're using the provided list query hook with selectFromResult for a single item, it will still begin fetching the item list once the component mounts (if not already cached), the same way a single item query hook would fetch the corresponding item (if not already cached)

[denchen]

I'm glad I found this discussion, as I'm currently trying to migrate my setup from createReducer() / createSelector() / Redux Sagas to RTKQ. Using the OP's example, I basically have a similar setup, with a getAllProducts() and getProductById(). I want all this data to be shared so that if getProductById() is called after getAllProducts(), then it'll look first to see if that data has already been fetched. But there is absolutely no guarantee getAllProducts() gets called first (similar to OP, it's a lot of data, and our API backend is rather slow).

Also, sharing the data has the benefit that the data is always in sync (as I don't want to always refetch every time getAllProducts() / getProductById() gets called.

In my previous setup, it was pretty straightforward to have all the data shared, as I created my state to be pretty much an object of Products that's keyed on ID.

I'm not sure what the best option for me is.