I have 3 queries in RTK which are run when the component is mounted. The data from the first query is passed into the second and third and I use skip: !isSuccess for the query to run only when the data is available. This works fine.
However, my use-case is slightly different. I wish to take IDs from the data in first query to pass to other two queries. If I send the data as is, I have to place IDs = data.map(row => row.id) inside the query function, which is run twice since there are two queries using the same data. I wish to extract these IDs before I send to the queries.
Here is how my code looks -
# inside the component
const { data, error, isLoading, isSuccess } = useGetDataQuery();
const { data: todoData, error: todoError } = useGetCountersQuery({"issueType": "todos", data}, {skip: !isSuccess});
const { data: rmaData, error: rmaError } = useGetCountersQuery({"issueType": "rmas", data}, {skip: !isSuccess})
if (error) { console.log(error); }
if (data) {
if (!data.success){
console.log("failed");
}
}
# the query
getCounters: build.query({
query: ({issueType, data}) => {
let IDs = data.data.map(row => row.id);
return ({
url: `${issueType}/count`,
method: 'POST',
body: { IDs }
})
}
})
Here is what I wish to achieve -
let IDs = [];
const { data, error, isLoading, isSuccess } = useGetDataQuery();
const { data: todoData, error: todoError } = useGetCountersQuery({"issueType": "todos", data: IDs}, {skip: IDs.length <= 0});
const { data: rmaData, error: rmaError } = useGetCountersQuery({"issueType": "rmas", data: IDs}, {skip: IDs.length <= 0});
if (error) { console.log(error); }
if (data) {
if (!data.success){
console.log("failed");
}
IDs = data.data.map(row => row.id);
}
I have tried it multiple ways but I wish to know the ideal way to do it. Please help. Thanks in advance!