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

使用 Laravel 将两个模型合并到一个分页查询中,并带有急切加载的关系

mysql查询数据怎么合并为一条

wp查询分页和类别

基于 mybatis 的分页和过滤查询

一条sql,有分页,表合并查询,多表连接,用于oracle数据库