React原生hook并使用分页调用API

Question

我有一个react本机应用程序，我在其中调用graphQL API。GraphQL查询的结构支持分页操作。

查询如下所示。我可以将大小和跳过变量都传递给查询，使其能够检索给定数量记录的数据。为了简单起见，我忽略了userData，因为它并不重要。

const paginationQuery = `{
actualDataByUser${skip ? '(where: {size: '+size+', start_position:' + skip + '})' : ''} {
data {
.... (IGNORE THIS)
}
}
}`;

我想知道，使用不同的size和skip参数，钩子在这里是否有意义？例如，我可以创建一个像这样的函数actualDataByUser，它运行上面的查询并获取前100条记录。

const getAllRecords = async (obj={}) => {
return actualDataByUser(obj);
}
The hook below will retrieve the first 100 records starting from 0.
export default function RecordScreen() {

const [recordList, setRecordList] = useState([]);
useEffect(() => {
const receivedRecords = getAllRecords({skip: 0, size: 100}).then(res => {
setRecordList(receivedRecords);
}, []);

}

然而，我正在努力了解每次递增skip的最佳方式，以使其能够继续流式传输数据。

Answer 1

以这种方式更新代码以防止错误

export default function RecordScreen() {

const [recordList, setRecordList] = useState([]);
useEffect(() => {
const receivedRecords = getAllRecords({skip: 0, size: 100}).then(res => {});
setRecordList(receivedRecords);
}, []);
}