无法使用RECT中的RTK-Query在Firestore中删除或添加数据

Question

我正在尝试实现删除并添加使用Firestore的RTK-Query在React中添加功能。我使用RTK查询在React中执行Firestore操作可能很奇怪。因此，我已经编写了服务API文件来删除并与Firestore添加操作。因此，每当我尝试使用RTK查询中删除或在Firestore中添加数据时，我会在控制台中遇到一些奇怪的错误。但是，当我刷新应用程序时，我在执行添加/删除操作后会在应用程序上看到更新的数据。由于某种原因，最初并不能为​​我提供正确的结果，因此由于以下错误，但是在Page Refresh之后，我将从React应用中的Firestore获得更新的值。

这是服务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文件的代码

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

queryfn必须始终返回具有data属性或error属性的对象 - 在您的情况下仅在错误情况下这样做。

尝试添加返回{data：'ok'}如果您没有更好的主意。