CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-toolkitrtk-query
Jim Peeters
Jim Peeters

Reputation: 2853

How can I get data from my store generated by RTK Query?

I'm using a very basic RTK Query hook to get some user data from an API. How can I access the data saved in my store inside of my components? I'm not able to get the data from the store generated in a specific matter by RTK Query.

I have a simple Post API and I called the getPosts hook. In Redux devtools I can see the data from the RTK query hook in my store:

Post API

import { createApi, fetchBaseQuery } from '@rtk-incubator/rtk-query';

export interface Post {
  id: number;
  name: string;
  fetched_at: string;
}

type PostsResponse = Post[];

export const postApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  entityTypes: ['Posts'],
  endpoints: (build) => ({
    getPosts: build.query<PostsResponse, void>({
      query: () => 'posts',
      provides: (result) => [
        ...result.map(({ id }) => ({ type: 'Posts', id } as const)),
        { type: 'Posts', id: 'LIST' },
      ],
    }),
  }),
});

Posts saved in store after hook was called

enter image description here

Upvotes: 7

Views: 9429

Answers (3)

Mahmonir Bakhtiyari
Mahmonir Bakhtiyari

Reputation: 605

As in RTK documentation is explained, the proposed solution is calling useQuery hooks with the same arguments as before it called. It retrieves data from cached enpoints, But as I need too many arguments to send to query hook, and I should send it to other component, so I prefer to use the store object to access data from endpoints as below:

const store = useStore();
const cachedQueries = store.getState().dashboardApi.queries;

Then I made an object with endpoint's name as key and their data as value:

let dashboardResult: { [key: string]: any } = {};        
Object.values(cachedQueries).forEach((item: any) => {
    dashboardResult = { 
       ...dashboardResult,
       ...{ [item?.endpointName]: item?.data?.data }
    }
});

Upvotes: 0

Dipanjan Panja
Dipanjan Panja

Reputation: 533

You can access data and status try this:

const result = api.endpoints.getPosts.select()(state)
const { data, status, error } = result

and call api without hook:

dispatch(api.endpoints.getPosts.initiate())

see more

Upvotes: 3

phry
phry

Reputation: 44086

The easiest way is to just call the getPosts hook in every component that needs the data. It will use the data from the cache and not make an extra request - but if you later mount that component without a parent component, or in another context where the data was not present yet, it will make the request.

So you are guaranteed to always have the data at hand that way.

Upvotes: 7

Related Questions