Search code examples
reactjsreact-reduxrtk-queryimmer.js

Redux RTK optimistic update causes Immer error


I've followed the docs (and some other posts) about RTK optimistic updates but I can't seem to get my case to work. Here is my createReply mutation:

createReply: builder.mutation<IPost, any>({
  query({...body}) {
    return {
      url: PostPath,
      method: 'POST',
      body: body,
    };
  },
  async onQueryStarted({...body}, {dispatch, queryFulfilled}) {

    const patchResult = dispatch(
      resourcesApi.util.updateQueryData('getRepliesById', body.parent, (draft) => {
        console.log(draft);
        Object.assign(draft, body)
      })
    )
    try {
      await queryFulfilled
    } catch {
      console.log("query was fulfilled");
      console.log(patchResult);
      // patchResult.undo()
    }
  }
}),

and this is the getRepliesById query that it's referencing:

getRepliesById: builder.query<IPost, string>({
  query: (id: string) => `${PostPath}/${id}/replies`,
}),

When I try to use this mutation, the POST works fine, but I'm given this error: [Immer] Immer only supports setting array indices and the 'length' property. (The error call stack ends with onQueryStarted).

Where here am I going against Immer rules?

Edit; Here is body:

const postObj = {
  content: reply,
  author: user._id,
  parent: _parentId,
  visibility: {scope: 'public'},
  media: [],
  ats: [],
  kind: 'comment',
};
createReply(postObj);

Solution

  • It seems that data is an array and now you are working with it as if it were an object. An array can only have number-indexed properties and your Object.assign seems to add other properties than that?