无法使用RTK-Query in react删除或添加防火墙中的数据

Question

我试图实现删除和添加功能，在反应使用RTK-查询与防火墙。我正在使用RTK查询执行React中的防火墙操作，这听起来可能很奇怪。因此，我已经编写了服务API文件来删除和添加使用防火墙的操作。因此，每当我尝试使用RTK查询删除或添加防火墙中的数据时，我的控制台中就会出现一些奇怪的错误。但是，当我刷新应用程序时，在执行add/delete操作之后，我将看到我的应用程序上的更新数据。由于某些原因，最初它没有提供正确的结果，因为下面的错误，但在页面刷新后，我得到更新的值从我的反应应用程序的消防局。

​

​

以下是服务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属性的对象--在您的示例中，只在错误情况下这样做。

如果您没有更好的想法，请尝试添加一个return { data: 'ok' }。