In an attempt to address the lack of pagination handling on the backend in this NextJS application, I proposed passing it as query parameters in the URL, like localhost:3000/patients?page=.
My initial approach was close:
import React, { useEffect } from 'react'
import PatientsTable from 'components/patients/PatientsTable'
import useSWRWithToken from 'hooks/useSWRWithToken'
import Feedback from 'components/feedback'
import { useRouter } from 'next/router'
function Patients(props) {
// Code snippet continues...
However, the functionality of navigating to the next and previous pages stopped working:
import React from 'react'
import { IconButton } from '@mui/material'
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
import { styled, useTheme } from '@mui/system'
const Root = styled('div')(({ theme }) => ({
// Styling code continues...
I suspect that my useEffect hook might be conflicting with the useSWR hook, but I have no concrete evidence.
The goal is to implement the concepts outlined here: https://swr.vercel.app/docs/pagination
Below is the implementation of useSWRWithToken:
import useSWR from 'swr'
import fetchWithToken from 'libs/fetchWithToken'
import { useAppContext } from 'context'
function useSWRWithToken(endpoint: any, dependency: Boolean = true) {
// Continued...
Furthermore, here is the component for the Patients Table:
import React, {
useEffect,
useState,
useMemo,
useCallback,
// Other imports...
} from 'react'
import { Paper } from '@mui/material'
// More complex component code follows...
It's important to note that global state management is handled through an appReducer:
import combineReducers from 'react-combine-reducers'
import { ReactElement } from 'react'
enum ActionName {
SET_PAGE_HEADING = 'SET_PAGE_HEADING',
SET_TIMER_RUNNING = 'SET_TIMER_RUNNING',
// Other action enums listed...