如何使用 DynamoDB 后端实现 React 分页前端

Question

我已经成功实现了 DynamoDB 分页并使用 API Gateway 和 Postman 进行了测试。但是，我对如何在 React 前端实现分页感到困惑。

目前，在第一次调用后端 api 时，它限制返回 2 张图像，带有 LastEvaluatedKey。 在我的 React 中，我将 React.useEffect() 实现为：

React.useEffect(() => {
    async function getAllImages() {
        const result = await getImages(auth.getIdToken()); 
        setImages(result.items); 
    }
    try {
        getAllImages(); 
    } catch(e) {
        alert(`Failed to fetch images ${e.message}`); 
    }
}, [auth]); 

在我的 api 中，我实现了调用后端的函数：

export async function getImages(idToken: string): Promise<any> {
const response = await axios.get(`${apiEndpoint}/images`, {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${idToken}`
    }
}); 

let nextKey = response.data.nextKey;

if (response.data.nextKey === null) {
    console.log('No more pictures to load!');
    return
} else {
    const moreResponse = await axios.get(`${apiEndpoint}/images?nextKey=${nextKey}`, {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${idToken}`
        }
    }); 
}

// return response.data.items;
return response.data;

}

然后，我创建了一个“加载更多”按钮来加载更多图像。但是我迷失了如何使用 LastEvaluatedKey 调用后端的第二次调用以加载更多图像？

这是我的 github 项目： https://github.com/ploratran/DogLookBook/tree/master/client

Answer 1

只有在我们有标记的情况下才能进行分页。在 UI 应用程序的情况下，保存 last-evaluate-key 可能是困难的、反模式的。但是，您需要跟踪 DDB 需要的一些信息，以便知道从哪里开始。

我的建议是执行以下操作 -

1. 跟踪从 UI 收到的第 N 条记录，即到现在为止提取的最后一条记录。
2. 当调用下一页请求时，使用截至目前的第 N 条记录调用 DDB，并从此查询中获取标记。
3. 将第 2 步中找到的 last-evaluate-key 传递给您的分页查询以返回下一组元素。
4. 更新第 N 条记录。
5. 重复步骤 2-4。