Load More Pagination using Prisma, Urql & React?

[deadcoder0904]

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.

[JoviDeCroock]

Depending on what cache you use there are a few options, one of them outlined in the documentation and two of them using your FE style of choice.

In graphCache you can use a custom resolver

You can also just use a usePagination helper:

const usePagination = (query, variables) => {
  const [skip, setSkip] = React.useState(0)
  const [data] = React.useState([])
  const [result] = useQuery({ query, variables: { ...variables, skip} })
  
  React.useEffect(() => {
    if (!result.fetching && result.data) {
      // write to data state
    }
  }, [result]);

  return [data]
}

The above probably needs some tweaking, it's more meant to give you a rough idea.

You can also use a VDOM based approach in case your skip, ... is derived from the query parameter:

const PaginatedPage = () => { useQuery() return vdomForQuery}

const Wrapper = () => {
  const [skip, setSkip] = React.useState(0);

  const list = new Array(Number(skip) / limit + 1).fill(1);

  return list.map((x, i) => <PaginatedPage skip={i * limit} />)
}

[deadcoder0904]

@JoviDeCroock I didn't understand the VDOM one.

When you say const PaginatedPage = () => { useQuery() return vdomForQuery}, what do you mean? And is the list variable supposed to be my data.getAcquisitionsByPrice?

[JoviDeCroock]

The list variable is the number of iterations you have skipped and are on, so skip = 24 with limit = 24 will give you two entries where you do:

const PaginatedPage = ({ skip }) => {
  const [result] = useQuery({ query, variables: { skip } })
  return /* render the queryResult */
}

const Wrapper = () => {
  const [skip, setSkip] = React.useState(0);

  const list = new Array(Number(skip) / limit + 1).fill(1);

  return list.map((x, i) => <PaginatedPage skip={i * limit} />)
}

So basically we use the wrapper to dictate the current variables and we render list-entries for them this means that if a user surfs to yourUrl?skip=24 the two first lists will get rendered as opposed to only skip=24 with that usePagination helper

[deadcoder0904]

So @JoviDeCroock I tried doing this:

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

However, I don't think I want it to have PaginatedPage in query params like ?skip=24. All I want is when someone clicks on Load More..., it adds it to the current state. I did try to do it now but getting an error:

Uncaught TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.

I know this is totally unrelated now to Urql but would appreciate any help :)

[JoviDeCroock]

Because you are spreading data rather than data.getAcquisitionsByPrice

[deadcoder0904]

Damn, noob mistake. Thank you @JoviDeCroock for a 2nd look, it worked 🎉