我正在关注本教程→ https://blog.logrocket.com/pagination-in-graphql-with-prisma-the-right-way/
最后,有一个基于Load More的分页,如下所示:
我尝试像这样实现它:
import React from 'react'
import { useQuery } from 'urql'
import { Card } from '../components/index'
import {
GET_ALL_ACQUISITIONS,
GET_ACQUISITIONS_BY_PRICE,
} from '../graphql/index'
export const AcquisitionList = ({
minPrice,
maxPrice,
undisclosed,
sortByDescPrice,
sortByAscStartupName,
}) => {
const [skip, setSkip] = React.useState(0)
const [result, reexecuteQuery] = useQuery({
query: GET_ACQUISITIONS_BY_PRICE,
variables: {
minPrice,
maxPrice,
undisclosed,
sortByDescPrice,
sortByAscStartupName,
skip,
take: 20,
},
})
const { data, fetching, error } = result
if (fetching) return <p className="mt-10 text-4xl text-center">Loading...</p>
if (error)
return (
<p className="mt-10 text-4xl text-center">Oh no... {error.message}</p>
)
return (
<>
<div className="flex flex-wrap justify-center mt-10">
{data.getAcquisitionsByPrice.map((startup, i) => {
return <Card key={i} startup={startup} index={i} />
})}
</div>
<div className="flex justify-center">
<button onClick={() => setSkip(skip + 20)}>Load More...</button>
</div>
</>
)
}
但是当我单击Load More...
按钮时,我失去了所有以前的状态。它还替换了整个 UI,Loading
因为我的if (fetching)
条件位于显示卡之上。
如何在使用新查询调用 Prisma 时保留以前的状态,以便显示所有显示卡?
所以第一次,我有20张卡,第二次加载它应该有40张卡等等......
目前,它一次只显示 20 张卡片,如果我有Previous
&Next
按钮,这很好,但我希望它像 Instagram 一样显示它,只需单击一个按钮。