使用分页反应原生钩子和调用 API答案

【问题标题】：React native hooks and calling API with pagination使用分页反应原生钩子和调用 API
【发布时间】：2021-09-05 12:52:57
【问题描述】：

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

查询如下所示。我可以将 size 和 skip 变量都传递给查询，以允许它检索给定数量的记录的数据。为简单起见，我忽略了 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 以允许它继续流式传输数据的最佳方式。

【问题讨论】：

我对此进行了进一步研究，并了解了这应该如何。我需要将它与滚动或搜索等用户操作联系起来，然后应该调用另一种方法，例如获取下一个数据（）。然后它将继续检索更多记录。

标签： reactjs react-native graphql react-hooks

【解决方案1】：

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

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

【讨论】：