无法在反应中使用 RTK-Query 在 firestore 中删除或添加数据

Question

我正在尝试使用带有 firestore 的 RTK-Query 在 React 中实现删除和添加功能。我在 React 中使用 RTK Query 执行 firestore 操作听起来可能很奇怪。所以，我编写了服务 API 文件来使用 firestore 进行删除和添加操作。因此，每当我尝试使用 RTK 查询在 firestore 中删除或添加数据时，我的控制台都会出现一些奇怪的错误。但是，当我刷新应用程序时，我会在执行 add/delete 操作后在我的应用程序上看到更新的数据。出于某种原因，由于以下错误，最初它没有为我提供正确的结果，但在页面刷新后，我在我的 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必须总是return一个带有data属性或[=12=的对象] 属性 - 在你的情况下，你只在错误情况下这样做。

如果您没有更好的主意，请尝试添加 return { data: 'ok' }。

无法在反应中使用 RTK-Query 在 firestore 中删除或添加数据

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

reactjs

redux

redux-firestore

redux-toolkit

rtk-query