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.
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
}