node.jsreactjsreact-reduxrtk-queryredux-persist

Rtk query get request data returning undefined


I am trying to send a get request using rtk query and store that in local storage using redux persist

//I have tried to view the token in the console,it is appearing
const {data , isSuccess }= useGetUserdataQuery({token:token})

console.log(useGetUserdataQuery(token))
//Returning {status: 'pending', isUninitialized: false, isLoading: true, isSuccess: false, isError: false, …}
useEffect(() => { 
  if(data && isSuccess) 
  dispatch(changeUser({user:data.user}))

}, [ data,isSuccess,dispatch])

Here is my api file with the get request

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import {REHYDRATE} from 'redux-persist'

export const userAuthApi = createApi({
    reducerPath: 'userAuthApi',
    baseQuery: fetchBaseQuery({ 
        baseUrl: `http://127.0.0.1:5000/user/`,
    }),
    extractRehydrationInfo(action, { reducerPath }) {
        if (action.type === REHYDRATE) {
          return action.payload[reducerPath]
        }
      },
    endpoints: (build) => ({
        getUserdata: build.query({
            query:({token})=>{
                return {
                    url: '/loggeduser',
                    method : 'GET',
                    body:{},
                    headers:{
                        'authorization': `Bearer ${token}`
                    }}}}),})})
export const { useGetUserdataQuery} = userAuthApi

here is my configuration for redux-persist along with rtk query

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query"
import counterSliceReducer  from "counter/CounterSlice"
import { userAuthApi } from "counter/userAuthApi";
import {persistReducer,FLUSH,REHYDRATE,PAUSE,PERSIST,
PURGE,REGISTER} from 'redux-persist'
import storage from "redux-persist/lib/storage"
//combining the userAuthApi.js and counterSliceReducer
const reducers = combineReducers({
   counterSliceReducer,
   [userAuthApi.reducerPath]:userAuthApi.reducer,
  })
const persistConfig = {key: 'root',storage,version:1}
const persistedReducer = persistReducer(persistConfig, reducers)  
export const store = configureStore({
    reducer:persistedReducer,
    middleware:(getDefaultMiddleware)=>
        getDefaultMiddleware({
         serializableCheck:{ignoreActions: [FLUSH,REHYDRATE,PAUSE,PERSIST,PURGE,REGISTER],},}).concat(userAuthApi.middleware,),
})
setupListeners(store.dispatch)

The backend api is working completely fine I have checked it on thunderclient ,but the frontend seems a bit off track.


Solution

  • Got same problem, solved using await:

    const [getUserData] = useGetUserdataQuery()
    
    const getData = async () => {
        const result = await getUserData({token:token})
        console.log(result.data) // here is your data
        console.log(result.error) // error
    }