React Redux Problem: How to call multiple api in your react component with React Redux Toolkit RTK queries?

Question

Hope you all are doing fine.

RTK queries return response in data attribute which can be accessed via hook generated by RTK

My Code:

const {data = [], isFetching} = useFetchConversationQuery(categoryId, {
    skip
});
const { data } = useFetchCategoryQuery();

My issue is that I'm trying to call 2 RTK queries in a react component so there cant be two attribute with the same name is there a way to change the name of data attribute in RTK queries,

score 1 · Accepted Answer · answered Nov 17 '21 at 14:11

I believe there's no way to change the RTK data attribute name, however what you can instead do is simply assign a different name when you destructure your object.

const {data = [], isFetching} = useFetchConversationQuery(categoryId, {
    skip
});
const { data: myNewDataName } = useFetchCategoryQuery();

myNewDataName // data from useFetchCategoryQuery

score 0 · Answer 2 · answered Apr 18 '22 at 10:11

I also have realized this limitation. This is not exactly what you are looking for but you can use them like this;

const conversation = useFetchConversationQuery(categoryId, {
    skip
});
const category = useFetchCategoryQuery();

// conversation.data.map(item=>console.log(item._id));
// console.log(category.data)

React Redux Problem: How to call multiple api in your react component with React Redux Toolkit RTK queries?

2 Answers2