Load More Pagination using Prisma, Urql & React?

Question

I am following this tutorial → https://blog.logrocket.com/pagination-in-graphql-with-prisma-the-right-way/

In the end, there is a Load More based pagination that looks like:

I tried implementing it like:

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>
    </>
  )
}

But I lose all the previous state when I click Load More... button. It also replaces the entire UI with Loading as my if (fetching) condition is on top of the display Cards.

How do I preserve the previous state while calling Prisma with the new query so I can show all the display Cards?

So the first time, I have 20 cards, 2nd time when I load it should have 40 cards & so on...

Currently, it only shows 20 cards at a time which is great if I had Previous & Next button but I want it to show it like Instagram with a click of a button.

Answer 1

Had to store the result in a separate local state and on every new query results, just had to add to it:

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>
      )}
    </>
  )
}