When i try to add a new comment by executing a mutation request, it does not result in a complete update of my cache, instead the cache data is just duplicated.
How can i resolve this problem? I expect that when adding new comment, cache will be updated.
I have these endpoints
fetchAllForumMessages: builder.query<IForumMessageTotal, FetchForumMessageFilter>({
query: ({ page, limit, textQuery,}) => ({
url: `${FORUM}`,
params: {
sortByDate: true,
search: textQuery,
page,
limit,
userLogin: true,
},
}),
transformResponse: (
response: unknown,
meta: FetchBaseQueryMeta | undefined
) => {
const totalCountHeader = meta?.response?.headers?.get("X-Total-Count");
const totalCount = totalCountHeader ? +totalCountHeader : 1;
return {
data: response as IForumMessage[],
totalCount,
};
},
serializeQueryArgs: ({ endpointName, queryArgs }) => {
const { page, ...filters } = queryArgs;
return { queryArgs };
},
forceRefetch({ currentArg, previousArg }) {
if (!currentArg || !previousArg) return true;
const { page: currentPage, ...currentFilters } = currentArg;
const { page: previousPage, ...previousFilters } = previousArg;
return compareObjects(currentFilters, previousFilters);
},
}),
fetchForumMessageById: builder.query<IForumMessage, string>({
query: (id) => ({
url: `${FORUM}/${id}`,
params: {
userLogin: true,
}
}),
}),
fetchForumCommentsByMessage: builder.query<IForumCommentTotal, FetchForumCommentFilter>({
providesTags: ["ForumComment"],
query: ({ id }) => ({
url: `${FORUM}/${id}${COMMENTS}`,
params: {
sortByDate: true,
limit: 10,
page: 1,
userLogin: true,
},
}),
transformResponse: (
response: unknown,
meta: FetchBaseQueryMeta | undefined
) => {
const totalCountHeader =
meta?.response?.headers?.get("X-Total-Count");
const totalCount = totalCountHeader ? +totalCountHeader : 1;
return {
data: response as IForumComment[],
totalCount,
};
},
serializeQueryArgs: ({ endpointName, queryArgs }) => {
const { page, ...filters } = queryArgs;
return JSON.stringify(filters) + endpointName;
},
merge: (currentCache, newItems, {arg, requestId}) => {
if (arg.page === 1) {
currentCache.data = newItems.data;
} else if (requestId) {
currentCache.data.push(...newItems.data);
}
},
forceRefetch({ currentArg, previousArg }) {
if (!currentArg || !previousArg) return true;
const { page: currentPage, ...currentFilters } = currentArg;
const { page: previousPage, ...previousFilters } = previousArg;
return compareObjects(currentFilters, previousFilters) && currentPage !== previousPage;
},
}),
createForumMessage: builder.mutation<IForumMessage, CreateForumMessageData>({
query: (args) => ({
url: `${FORUM}${CREATE}`,
method: "POST",
body: args,
}),
}),
createForumComment: builder.mutation<IForumComment, CreateForumCommenteData>({
invalidatesTags: ["ForumComment"],
query: (args) => ({
url: `${FORUM}${COMMENTS}${CREATE}`,
method: "POST",
body: args,
}),
}),
…and this component with form
const CommentForm = ({userId, forummessageId}: CommentFormProps) => {
const [create, data] = useCreateForumCommentMutation()
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
getValues,
} = useForm();
const onSubmit = async (formData: FieldValues) => {
const text = getValues("text");
const newComment = await create({
userId: userId as string,
forummessageId,
text,
});
};
if (!userId) {
return (
<div className={styles.notAuth}>
Авторизируйтесь, чтобы ответить на сообщение!
</div>
)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<textarea
className={styles.comment}
{...register("text", {
minLength: 35,
})}
placeholder="Комментарий"
></textarea>
<Button disabled={isSubmitting} type="submit">Отправить</Button>
</form>
);
};
export default CommentForm;
1