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

Question

我正在关注本教程→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 一样显示，只需单击一个按钮。

Answer 1

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

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,
      maxPrice,
      undisclosed,
      sortByDescPrice,
      sortByAscStartupName,
      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>
      )}
    </>
  )
}