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);
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.