CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-toolkitrtk-query
folov55205
folov55205

Reputation: 35

How to get data from already fetched rtk-query

I want to get already fetched data in Navbar from profileApi which used in profile component. I want to display image on Navbar but image is available in profileApi and contains lots of user data, so i dont want to call same API for navbar just for image.

So is there any way to achieve this? or can we set data profileApi data to redux store somehow and get from there, like we do without rtk-query.

if somehow data set to redux store then how gonna access from rtk reducers?

const store = configureStore({
  reducer: {
    auth: AuthSlice.reducer,
    [UsersPostApi.reducerPath]: UsersPostApi.reducer,
    [ProfileApi.reducerPath]: ProfileApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling,
  // and other useful features of `rtk-query`.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat([
      UsersPostApi.middleware,
      ProfileApi.middleware,
    ]),
});

for auth i can do

let { data } = useSelector((state) => state.auth);

But How to access ProfileApi to get data in any component?

Update: the route /api/profile/:id im using params to get user data in profile

let { userbyname } = useParams();
const { data, error } = useGetProfileQuery(userbyname);

Upvotes: 0

Views: 1880

Answers (1)

antokhio
antokhio

Reputation: 1934

First, it’s not recommended and suggested as no go pattern to have multiple api’s in same app. You have injectEndpoints and enchanceEndpoints, more link

As for the question answer, after you do:

const { data, isLoading 
, isError, error } = useProfileQuery(undefined)

You can do the same anywhere in your app, and get data from cache. You don’t need to do anything more then that.

Note the undefined passed as args, this is used as key for accessing cached data when query doesn’t have any args.

Upvotes: 3

Related Questions