[QUESTION] Use Redux Query to load pre-data and merge the rest data after

[l2aelba]

Example If I want to render the list as fast as possible by call this API first:

// /api/posts?scope=id,lastEdited
[
  { id: "1", lastEdited: 1670321 },
  { id: "2", lastEdited: 1670320 },
  // ...
]

Then call get the rest data one by one (lazy load) (when render or element in viewport)

// /api/post/{id}
{ id: "1", lastEdited: 1670321, content: "…", except: "…" }

Redux Query:

export const postApi = createApi({
  reducerPath: 'postApi',
  tagTypes: ['Posts'],
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => ({ url: '/api/posts?scope=id,lastEdited' }),
      providesTags: (result) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Posts', id })), { type: 'Posts', id: 'LIST' }]
          : [{ type: 'Posts', id: 'LIST' }],
    }),
    getPost: builder.mutation({
      query(id) {
        return {
          url: `/api/posts/${id}`,
        }
      },
      invalidatesTags: (result, error, id) => [{ type: 'Posts', id }],
    }),
  }),
})

How to merge the actual data into the list, when I run…?

const [runQuery, {  data }] = postApi.endpoints.getPost.useMutation()

const getActualData = () => {
   try {
      runQuery(id)
    } catch (error) { }
}

Render the list:

const { data } = postApi.endpoints.getPosts.useQuery(undefined, {
    skip: false,
    refetchOnMountOrArgChange: true,
})

data should be…

undefined // (no data)
[{id:"1",lastEdited:1670321}, {id:"2",lastEdited:1670320}] // first-load
[{id:"1",lastEdited:1670321,content:"…",except:"…"},{id:"2",lastEdited:1670320,content:"…",except:"…"}] // after called  runQuery("1") and  runQuery("2")

Right now I cannot merge the actual data (getPost("1")) to the list (getPosts)

This is possible ? or any better solution?
Thanks so much.

[markerikson]

The short answer is that RTK Query is not really designed for this use case.

RTK Query is a "document/response"-style caching tool, not a "normalized" caching tool:

• https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#no-normalized-or-de-duplicated-cache

There's no direct way to combine data from different endpoints like that.

(It might be possible to wrangle something together using the cache lifecycle methods and updateQueryData(), but it would be difficult and I wouldn't recommend it.)

[l2aelba]

Thanks for letting me know, I will find an alternative way :)