使用RTK Query从Firebase实时数据库获取数据报错求代码修正

当前使用RTK Query从Firebase实时数据库获取数据时，代码因返回值不符合要求报错，错误信息翻译如下：

queryFn必须返回一个包含data或error属性的对象，当前返回值无效。

问题代码 #

apiSlice.js

import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
import { onValue, ref } from "firebase/database";
import { db } from "libs/firebase";

export const userApi = createApi({
  baseQuery: fakeBaseQuery(),
  endpoints: builder => ({
    getUser: builder.query({
      queryFn(uid) {
        try {
          onValue(ref(db, `users/user${uid}`), snapshot => {
            return { data: snapshot.val() };
          });
        } catch (e) {
          return { error: e };
        }
      },
    }),
  }),
});

export const { useGetUserQuery } = userApi;

store.js

import { configureStore } from "@reduxjs/toolkit";
import { userApi } from "./apiSlice";

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

组件调用代码

const { data: user, error, isLoading, isSuccess } = useGetUserQuery(1);
console.log(user);

问题原因 #

onValue采用回调式异步逻辑，你在回调函数内的return无法被queryFn捕获，导致queryFn没有返回任何符合RTK Query要求的对象（必须包含data或error），因此触发报错。

修正后的代码（apiSlice.js） #

import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
import { onValue, ref } from "firebase/database";
import { db } from "libs/firebase";

export const userApi = createApi({
  baseQuery: fakeBaseQuery(),
  endpoints: builder => ({
    getUser: builder.query({
      async queryFn(uid) {
        try {
          // 将回调式的onValue转换为Promise，适配RTK Query的异步要求
          const snapshot = await new Promise((resolve, reject) => {
            const userRef = ref(db, `users/user${uid}`);
            onValue(userRef, resolve, reject);
          });
          return { data: snapshot.val() };
        } catch (e) {
          // 返回符合RTK Query规范的错误对象
          return { error: { status: "FETCH_ERROR", message: e.message } };
        }
      },
    }),
  }),
});

export const { useGetUserQuery } = userApi;

修正说明 #

1. 将queryFn声明为异步函数，支持await语法
2. 把onValue包装成Promise，确保能获取到数据库快照并返回给RTK Query
3. 错误处理时返回包含status和message的标准错误对象，方便组件端统一处理错误状态

内容的提问来源于stack exchange，提问作者clifford