I am currently trying to get data from a Firebase Realtime Database using RTK Query. However, the code here is giving me an error because the value returned in return is not correct. If anyone has knowledge of this, I would appreciate it if you could correct the code to the correct one.

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;

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

error message

CodePudding user response：

Try something along the lines of

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