RTK 查询分页和合并查询
Posted
技术标签:
【中文标题】RTK 查询分页和合并查询【英文标题】：RTK Query Pagination and Combine Queries 【发布时间】：2021-11-28 15:03:12 【问题描述】：
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)
我正在使用 Stack RTK Query、React Native 进行移动应用开发。我绝对是使用这两个堆栈的初学者。我正在研究使用平面列表并使用列表末尾提供的后退和下一步按钮为其添加分页。现在列表的数据是使用 4 个不同的查询获取的，第一个问题是我正在寻找一种方法来组合这些查询并并行执行它们，其次我正在研究如何手动使用查询触发器，我正在使用惰性使用查询钩子，但我应该在哪里触发相同的，我应该更改状态并且钩子应该自动触发还是应该计算所有数据按 next/back 然后重新渲染组件？
【问题讨论】：
【参考方案1】：这就是我的处理方式
在您的 createApi 中
getUsers: builder.query(
query: (page) => `users?page=$page&perPage=25`,
),
在您的组件中
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>
</>
)
这应该可行。
【讨论】：
以上是关于RTK 查询分页和合并查询的主要内容，如果未能解决你的问题，请参考以下文章
如何合并集合和查询构建器，然后在其上使用分页 Laravel 8