Разбиение запросов RTK на страницы и объединение запросов

#reactjs #react-native #redux #redux-toolkit #rtk-query

Вопрос:

 
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 amp;amp; sites.length > 0 amp;amp; 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.resu<
        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.resu<
          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.resu<
        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.resu<
          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.resu<
      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.resu<
        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, React Native для разработки мобильных приложений. Я абсолютный новичок в использовании этих 2 стеков. Я рассматриваю возможность использования плоского списка и добавления в него разбивки на страницы с помощью кнопки «Назад» и кнопки «Далее», расположенной в конце списка. Теперь данные для списка извлекаются с использованием 4 разных запросов, Первая проблема заключается в том, что я ищу способ объединить эти запросы и выполнять их параллельно, Во-вторых, я рассматриваю, как использовать триггер запроса вручную, я использую крючок для ленивого использования запроса, но где я должен запустить то же самое, должен ли я изменить состояние, и крючок должен сработать автоматически или я должен вычислить все данные при нажатии кнопки далее/назад, а затем повторно запустить компонент?

Ответ №1:

Вот как я бы подошел к этому

В вашем файле createApi

 getUsers: builder.query({
  query: (page) => `users?page=${page}amp;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>
    </>
)
 

Это должно сработать.