RTK Query Pagination and Combine Queries - reactjs

Question

const renderItem = ({ item }: {item : siteDataCard}) => {
return (
<SiteCard key={item.key} siteName = {item.siteName} status={item.status} alarmCount ={item.alarmCount} siteCapacity ={item.siteCapacity}
performanceRatio = {item.performanceRatio} dailyEnergy = {item.energyToday} outputActivePower = {item.outputActivePower}
></SiteCard>
)
};
const AccountScreen = ({sites, ...props} : {sites :Array<site>}) => {
let [skip, setSkip] = useState(true);
let [dataLoaded, setDataLoaded] = useState(false);
let [page, setPage] = useState(1);
let [siteDataList, setSiteDataList] = useState<Array<siteDataCard>>([]);
let [visible, setVisible] = useState(false);
let [errors, setErrors] = useState('');
let [dailyEnergy, setDailyEnergy] = useState({});
let [siteKeys,setSiteKeys] = useState<Array<string>>([]);
let [search, setSearch] = useState('');
let {data : sitesData, isSuccess : sitesQuerySuccess} = useLoggedInUserSitesQuery({per : 10, page : page, search : search});
let [trigger, result] = useLazySiteAlarmCountDataQuery();
let [sitesTrigger, {data : sitesResult, isSuccess : isLazySiteQuerySuccess}] = useLazyLoggedInUserSitesQuery();
let [siteLevelDataTrigger, {data : siteLevelResult, isSuccess : isLazySiteLevelQuerySuccess}] = useLazySiteLevelDataForSiteQuery();
let [latestDataTrigger, {data : latestDataResult}] = useLazyLatestEventDataQuery();
const onChange = (search : string) => {
setSearch(search);
setSiteDataList([]);
}
if(sites && sites.length > 0 && dataLoaded === false) {
let siteKeys: Array<string> = [];
sites.forEach(site => {
siteKeys.push(site.site_key);
})
trigger({siteKeys});
let siteLevelDataPayloadForEnergyAndPR : siteDataQuery = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
timeGrouping : 'DAY',
cumulate : false,
provideBufferData : false,
bufferInterval : null,
suppressErrors : true,
limit : null,
siteParameterAggregationType : {}
}
if(siteKeys.length > 0) {
let paramAggregation : {[key : string] : any} = siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType;
siteKeys.forEach(siteKey => {
let option : Array<ParameterDataQueryOption> = [{ parameterName: "Daily Energy", dataQueryOperation: null }, { parameterName: "Total Energy", dataQueryOperation: null },
{parameterName : 'Performance Ratio', dataQueryOperation : null}];
let currentSiteKey : string = siteKey;
paramAggregation[currentSiteKey] = option;
})
siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType = paramAggregation
}
siteLevelDataTrigger(siteLevelDataPayloadForEnergyAndPR);
let latestDataPayload : siteLatestDataRequest = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
validateParameterPresence : true,
suppressErrors : true,
siteParameterList : {}
}
if(siteKeys.length > 0) {
let siteParameterList : {[key : string] : any} = latestDataPayload.siteParameterList;
siteKeys.forEach(siteKey => {
let option : Array<string> = ['Output Active Power'];
let currentSiteKey : string = siteKey;
siteParameterList[currentSiteKey] = option;
})
latestDataPayload.siteParameterList = siteParameterList;
}
latestDataTrigger(latestDataPayload);
setDataLoaded(true)
}
return (
<AccountContainer>
<Header ></Header>
<ScrollView style = {accountStyles.accountBar}>
<AccountBar></AccountBar>
</ScrollView>
{sitesData ? sitesData.elements.map(site => {
let alarmData = result ? result.data ? result.data : null : null;
let totalAlarmCount = 0;
let prValue : number | string = '-';
let dailyEnergyValue : number | string = '-';
let oapValue : number | string = '-';
let allDataLoaded = false;
if(alarmData !== null) {
alarmData.forEach(alarm => {
if(alarm.siteKey === site.site_key) {
totalAlarmCount += alarm.noDataInverterAlarmCount;
totalAlarmCount += alarm.noDataRuleEvaluationLogsCount;
totalAlarmCount += alarm.openCommunicationLogsCount;
totalAlarmCount += alarm.openInverterAlarmCount;
totalAlarmCount += alarm.openRuleEvaluationLogsCount;
}
})
}
if(siteLevelResult) {
let originalResult = siteLevelResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Daily Energy") {
dailyEnergyValue = siteData.value;
}
if(siteData.parameter_name === 'Performance Ratio') {
prValue = siteData.value;
}
})
}
})
}
if(latestDataResult) {
let originalResult = latestDataResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Output Active Power") {
oapValue = siteData.value;
}
})
}
})
allDataLoaded = true;
}
if(allDataLoaded) {
let sitePresent : boolean = false;
siteDataList.forEach(siteCard => {
if(siteCard.key === site.site_key) {
sitePresent = true;
}
});
if(!sitePresent)
siteDataList.push({key : site.site_key, siteName : site.name, status : site.status, alarmCount : totalAlarmCount, siteCapacity : site.site_capacity, performanceRatio : prValue, energyToday : dailyEnergyValue, outputActivePower : oapValue});
}
})
: null}
<View style={accountStyles.searchBar}>
<SearchTextBar
label="Search"
value={search}
onChangeText={text => onChange(text)}
autoCapitalize="none"
></SearchTextBar>
</View>
<View style = {accountStyles.flatListView}>
<FlatList data = {siteDataList} renderItem = {renderItem} />
</View>
<View style = {accountStyles.actionButtons}>
<Button mode="contained" style = {{backgroundColor : 'white'}} disabled = {page === 1? true : false} onPress={() => {
setPage(page - 1);
setSiteDataList([]);
let siteKeys: Array<string> = [];
sites.forEach(site => {
siteKeys.push(site.site_key);
})
trigger({siteKeys});
let siteLevelDataPayloadForEnergyAndPR : siteDataQuery = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
timeGrouping : 'DAY',
cumulate : false,
provideBufferData : false,
bufferInterval : null,
suppressErrors : true,
limit : null,
siteParameterAggregationType : {}
}
if(siteKeys.length > 0) {
let paramAggregation : {[key : string] : any} = siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType;
siteKeys.forEach(siteKey => {
let option : Array<ParameterDataQueryOption> = [{ parameterName: "Daily Energy", dataQueryOperation: null }, { parameterName: "Total Energy", dataQueryOperation: null },
{parameterName : 'Performance Ratio', dataQueryOperation : null}];
let currentSiteKey : string = siteKey;
paramAggregation[currentSiteKey] = option;
})
siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType = paramAggregation
}
siteLevelDataTrigger(siteLevelDataPayloadForEnergyAndPR);
let latestDataPayload : siteLatestDataRequest = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
validateParameterPresence : true,
suppressErrors : true,
siteParameterList : {}
}
if(siteKeys.length > 0) {
let siteParameterList : {[key : string] : any} = latestDataPayload.siteParameterList;
siteKeys.forEach(siteKey => {
let option : Array<string> = ['Output Active Power'];
let currentSiteKey : string = siteKey;
siteParameterList[currentSiteKey] = option;
})
latestDataPayload.siteParameterList = siteParameterList;
}
latestDataTrigger(latestDataPayload);
sitesData ? sitesData.elements.map(site => {
let alarmData = result ? result.data ? result.data : null : null;
let totalAlarmCount = 0;
let prValue : number | string = '-';
let dailyEnergyValue : number | string = '-';
let oapValue : number | string = '-';
let allDataLoaded = false;
if(alarmData !== null) {
alarmData.forEach(alarm => {
if(alarm.siteKey === site.site_key) {
totalAlarmCount += alarm.noDataInverterAlarmCount;
totalAlarmCount += alarm.noDataRuleEvaluationLogsCount;
totalAlarmCount += alarm.openCommunicationLogsCount;
totalAlarmCount += alarm.openInverterAlarmCount;
totalAlarmCount += alarm.openRuleEvaluationLogsCount;
}
})
}
if(siteLevelResult) {
let originalResult = siteLevelResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Daily Energy") {
dailyEnergyValue = siteData.value;
}
if(siteData.parameter_name === 'Performance Ratio') {
prValue = siteData.value;
}
})
}
})
}
if(latestDataResult) {
let originalResult = latestDataResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Output Active Power") {
oapValue = siteData.value;
}
})
}
})
allDataLoaded = true;
}
if(allDataLoaded) {
let sitePresent : boolean = false;
siteDataList.forEach(siteCard => {
if(siteCard.key === site.site_key) {
sitePresent = true;
}
});
if(!sitePresent)
siteDataList.push({key : site.site_key, siteName : site.name, status : site.status, alarmCount : totalAlarmCount, siteCapacity : site.site_capacity, performanceRatio : prValue, energyToday : dailyEnergyValue, outputActivePower : oapValue});
}
}): null
}}>
<Text style = {{color : 'black'}}>Back</Text>
</Button>
<Button mode="contained" style = {{backgroundColor : 'white'}} onPress={() => {
setPage(page +1);
setSiteDataList([]);
let siteKeys: Array<string> = [];
sites.forEach(site => {
siteKeys.push(site.site_key);
})
trigger({siteKeys});
let siteLevelDataPayloadForEnergyAndPR : siteDataQuery = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
timeGrouping : 'DAY',
cumulate : false,
provideBufferData : false,
bufferInterval : null,
suppressErrors : true,
limit : null,
siteParameterAggregationType : {}
}
if(siteKeys.length > 0) {
let paramAggregation : {[key : string] : any} = siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType;
siteKeys.forEach(siteKey => {
let option : Array<ParameterDataQueryOption> = [{ parameterName: "Daily Energy", dataQueryOperation: null }, { parameterName: "Total Energy", dataQueryOperation: null },
{parameterName : 'Performance Ratio', dataQueryOperation : null}];
let currentSiteKey : string = siteKey;
paramAggregation[currentSiteKey] = option;
})
siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType = paramAggregation
}
siteLevelDataTrigger(siteLevelDataPayloadForEnergyAndPR);
let latestDataPayload : siteLatestDataRequest = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
validateParameterPresence : true,
suppressErrors : true,
siteParameterList : {}
}
if(siteKeys.length > 0) {
let siteParameterList : {[key : string] : any} = latestDataPayload.siteParameterList;
siteKeys.forEach(siteKey => {
let option : Array<string> = ['Output Active Power'];
let currentSiteKey : string = siteKey;
siteParameterList[currentSiteKey] = option;
})
latestDataPayload.siteParameterList = siteParameterList;
}
latestDataTrigger(latestDataPayload);
sitesData ? sitesData.elements.map(site => {
let alarmData = result ? result.data ? result.data : null : null;
let totalAlarmCount = 0;
let prValue : number | string = '-';
let dailyEnergyValue : number | string = '-';
let oapValue : number | string = '-';
let allDataLoaded = false;
if(alarmData !== null) {
alarmData.forEach(alarm => {
if(alarm.siteKey === site.site_key) {
totalAlarmCount += alarm.noDataInverterAlarmCount;
totalAlarmCount += alarm.noDataRuleEvaluationLogsCount;
totalAlarmCount += alarm.openCommunicationLogsCount;
totalAlarmCount += alarm.openInverterAlarmCount;
totalAlarmCount += alarm.openRuleEvaluationLogsCount;
}
})
}
if(siteLevelResult) {
let originalResult = siteLevelResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Daily Energy") {
dailyEnergyValue = siteData.value;
}
if(siteData.parameter_name === 'Performance Ratio') {
prValue = siteData.value;
}
})
}
})
}
if(latestDataResult) {
let originalResult = latestDataResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Output Active Power") {
oapValue = siteData.value;
}
})
}
})
allDataLoaded = true;
}
if(allDataLoaded) {
let sitePresent : boolean = false;
siteDataList.forEach(siteCard => {
if(siteCard.key === site.site_key) {
sitePresent = true;
}
});
if(!sitePresent)
siteDataList.push({key : site.site_key, siteName : site.name, status : site.status, alarmCount : totalAlarmCount, siteCapacity : site.site_capacity, performanceRatio : prValue, energyToday : dailyEnergyValue, outputActivePower : oapValue});
}
}): null;
setSiteDataList(siteDataList);
}}>
<Text style = {{color : 'black'}}>Next</Text>
</Button>
</View>
</AccountContainer>
)
}
const accountStyles = StyleSheet.create({
accountBar : {
width : '100%',
backgroundColor : '#313644',
paddingLeft : 20,
paddingRight : 20,
paddingTop : 30,
flex : 1
},
pageView : {
width : '100%',
},
searchBar : {
alignItems : 'center',
padding : 10,
},
flatListView : {
flex : 3,
},
actionButtons : {
display : 'flex',
flexDirection : 'row',
marginVertical : 10,
alignItems : 'center',
justifyContent : 'space-around'
}
})
function mapStateToProps(state : RootState) {
return {
sites : state.sitesSlice.sites
};
}
export default connect(mapStateToProps)(AccountScreen)
I am using Stack RTK Query, React Native for Mobile App Development. I am absolute beginner to using these 2 stacks. I am looking into using a flatlist and adding pagination to it using a back and a next button provided just at the end of the list. Now the data for the list is fetched using 4 different queries, First problem is I am looking at a way to combine these queries and execute them parallely, Second I am looking at how to use the query trigger manually, I am using a lazy use query hook but where should I trigger the same, should I change the state and the hook should trigger automatically or should I compute all the data on press of next/back and then rerender the component?

Answer 1

This is how I would approach it
In your createApi
getUsers: builder.query({
query: (page) => `users?page=${page}&perPage=25`,
}),
In your component
const [noMoreResults, setNoMoreResults] = useState(false);
const [page, setPage] = useState(1)
const [users, setUsers] = useState([]);
const { data = [] } = useGetUsersQuery(page, {
skip: noMoreResults
});
useEffect(() => {
if(data.length) {
setUsers([...users, ...data]);
} else if(page > 1) {
setNoMoreResults(true);
}
}, [data]);
return (
<>
{users.map((user) => (
<>
User: {user.id} <br />
<>
))}
<input type="button" onClick={() => setPage(page+1)}>Next page</input>
</>
)
This should work.