使用 Prisma、Urql 和 React 加载更多分页？

问题描述

我正在学习本教程 → https://blog.logrocket.com/pagination-in-graphql-with-prisma-the-right-way/

最后，有一个基于加载更多的分页，如下所示：

我尝试像这样实现它：

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,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... 按钮时，我失去了之前的所有状态。它还用 Loading 替换了整个 UI，因为我的 if (fetching) 条件位于显示卡的顶部。

如何在使用新查询调用 prisma 时保留以前的状态，以便显示所有显示卡？

所以第一次，我有 20 张卡，第二次加载时应该有 40 张卡等等......

目前，它一次只显示 20 张卡片，如果我有 PrevIoUs 和 Next 按钮，这很好，但我希望它通过单击按钮像 Instagram 一样显示。

解决方法

必须将结果存储在单独的本地状态中，并且在每个新的查询结果中，只需添加：

import React from 'react'
import { useQuery } from 'urql'

import { Card } from '../components/index'

import {
  GET_ALL_ACQUISITIONS,GET_ACQUISITIONS_BY_PRICE,} from '../graphql/index'

const Template = ({ children }) => (
  <p className="mt-10 text-4xl text-center">{children}</p>
)

export const AcquisitionList = ({
  minPrice,maxPrice,undisclosed,sortByDescPrice,sortByAscStartupName,}) => {
  const [acq,setAcq] = React.useState([])
  const [skip,setSkip] = React.useState(0)
  const [result,reexecuteQuery] = useQuery({
    query: GET_ACQUISITIONS_BY_PRICE,variables: {
      minPrice,skip,take: 20,},})

  const { data,fetching,error } = result

  React.useEffect(() => {
    setAcq([...acq,...data])
  },[data])

  if (fetching && !data) return <Template>Loading...</Template>
  if (error && !data) return <Template>Oh no... {error.message}</Template>

  return (
    <>
      {data.getAcquisitionsByPrice.length > 0 && (
        <div className="flex flex-wrap justify-center mt-10">
          {acq.length > 0 &&
            acq.getAcquisitionsByPrice.map((startup,i) => {
              return <Card key={i} startup={startup} index={i} />
            })}
        </div>
      )}

      {fetching && <Template>Loading...</Template>}
      {error && <Template>Oh no... {error.message}</Template>}

      {data.getAcquisitionsByPrice.length !== 0 && (
        <div className="flex justify-center">
          <button
            className="inline-flex items-center px-4 py-2 mt-16 text-sm font-medium text-white border border-transparent rounded-md shadow-sm select-none transform hover:-translate-y-0.5 transition-all duration-150 bg-gradient-to-br from-indigo-600 hover:bg-gradient-to-br hover:from-indigo-700 focus:ring-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:shadow-lg"
            onClick={() => setSkip(skip + 20)}
          >
            <svg
              className="w-6 h-6 text-white"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"
              ></path>
            </svg>
            <span className="ml-2">Load More...</span>
          </button>
        </div>
      )}
    </>
  )
}