Unable to delete or add data in firestore using RTK-Query in react

Question

I am trying to achieve delete and add functionality in react using RTK-Query with firestore. It sound might be weird that I am using RTK Query to perform firestore operation in React. So, I have written service API file to delete and add operation with firestore. So, whenever I try to delete or add data in firestore with RTK Query, so I am getting some weird error in my console. However, when I refresh the application then I am seeing the updated data on my app after performing the add/delete operation. For some reason, initially it's not providing me correct result due to below error but after page refresh I am getting the updated value from firestore in my react app.

Here is code for service API

import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
import {
  addDoc,
  collection,
  deleteDoc,
  doc,
  getDocs,
  onSnapshot,
  serverTimestamp,
} from "firebase/firestore";
import { db } from "../firebase";

export const contactsApi = createApi({
  reducerPath: "api",
  baseQuery: fakeBaseQuery(),
  tagTypes: ["Contact"],
  endpoints: (builder) => ({
    contacts: builder.query({
      async queryFn() {
        try {
          const userRef = collection(db, "users");
          const querySnapshot = await getDocs(userRef);
          let usersData = [];
          querySnapshot?.forEach((doc) => {
            usersData.push({
              id: doc.id,
              ...doc.data(),
            });
          });
          return { data: usersData };
        } catch (err) {
          console.log("err", err);
          return { error: err };
        }
      },
      providesTags: ["Contact"],
    }),
    addContact: builder.mutation({ 
      async queryFn(contact) {
        try {
          await addDoc(collection(db, "users"), {
            ...contact,
            timestamp: serverTimestamp(),
          });
        } catch (err) {
          return { error: err ? err : null };
        }
      },
      invalidatesTags: ["Contact"],
    }),
    deleteContact: builder.mutation({
      async queryFn(id) {
        try {
          await deleteDoc(doc(db, "users", id));
        } catch (err) {
          if (err) {
            return { error: err };
          }
        }
      },
      invalidatesTags: ["Contact"],
    }),
  }),
});

export const {
  useContactsQuery,
  useAddContactMutation,
  useDeleteContactMutation,
} = contactsApi;

store.js file

import { configureStore } from "@reduxjs/toolkit";
import { contactsApi } from "./services/contactsApi";
import { setupListeners } from "@reduxjs/toolkit/query";

export const store = configureStore({
  reducer: {
    [contactsApi.reducerPath]: contactsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }).concat(contactsApi.middleware),
});

setupListeners(store.dispatch);

Answer 1

A queryFn has to always return an object with either a data property or an error property - in your case you only do that in the error case.

Try adding a return { data: 'ok' } if you don't have any better idea.