├── .eslintrc.json
├── next.config.js
├── public
    ├── favicon.ico
    └── vercel.svg
├── pages
    ├── api
    │   └── hello.js
    ├── _app.js
    ├── index.js
    ├── infiniteCSR.js
    ├── paginationCSR.js
    └── paginationSSR.js
├── .gitignore
├── package.json
├── README.md
└── styles
    ├── globals.css
    └── Home.module.css


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elisabeth-leonhardt/react-query-pagination/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pagination",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev -p 3001",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "@material-ui/core": "^4.12.3",
12 |     "@material-ui/lab": "^4.0.0-alpha.60",
13 |     "next": "12.0.4",
14 |     "react": "17.0.2",
15 |     "react-dom": "17.0.2",
16 |     "react-infinite-scroll-component": "^6.1.0",
17 |     "react-query": "^3.33.5"
18 |   },
19 |   "devDependencies": {
20 |     "eslint": "7.32.0",
21 |     "eslint-config-next": "12.0.4"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | import { ReactQueryDevtools } from "react-query/devtools";
 3 | 
 4 | import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
 5 | import { useState } from "react";
 6 | 
 7 | function MyApp({ Component, pageProps }) {
 8 |   const [queryClient] = useState(() => new QueryClient());
 9 |   return (
10 |     <QueryClientProvider client={queryClient}>
11 |       <Hydrate state={pageProps.dehydratedState}>
12 |         <Component {...pageProps} />
13 |         <ReactQueryDevtools initialIsOpen={false}></ReactQueryDevtools>
14 |       </Hydrate>
15 |     </QueryClientProvider>
16 |   );
17 | }
18 | 
19 | export default MyApp;
20 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | Install the dependencies (I use npm but use whatever you like here)
 6 | 
 7 | ```bash
 8 | npm install
 9 | ```
10 | 
11 | Run the project
12 | 
13 | ```bash
14 | npm run dev
15 | # or
16 | yarn dev
17 | ```
18 | 
19 | Open [http://localhost:3001](http://localhost:3001) with your browser to see the result.
20 | 
21 | ## This project implements Pagination and Infinite Scroll with the Rick and Morty API
22 | 
23 | to see the implemented pagination with CSR, go to [http://localhost:3001/paginationCSR](http://localhost:3001/paginationCSR)
24 | 
25 | to see the implemented pagination with SSR, go to [http://localhost:3001/paginationSSR](http://localhost:3001/paginationSSR)
26 | 
27 | to see the implemented infinite scroll (CSR), go to [http://localhost:3001/infiniteCSR](http://localhost:3001/infiniteCSR)
28 | 
29 | don't forget to check out my [blog](https://dev.to/elisabethleonhardt) on dev.to to read the explainations on how this is implemented!
30 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function Home(props) {
 4 |   return (
 5 |     <div id='welcome'>
 6 |       <h1>Explore how I implemented pagination:</h1>
 7 |       <h2>Client side pagination:</h2>
 8 |       <a href='https://dev.to/elisabethleonhardt/implementing-pagination-with-nextjs-mui-and-react-query-2ab'>
 9 |         Read the Article
10 |       </a>
11 |       <Link href='/paginationCSR'>
12 |         <a>See it working</a>
13 |       </Link>{" "}
14 |       <a href='https://github.com/elisabeth-leonhardt/react-query-pagination/tree/main/pages'>
15 |         See the code
16 |       </a>
17 |       <h2>Server side pagination:</h2>
18 |       <a href='https://dev.to/elisabethleonhardt/'>Read the Article</a>
19 |       <Link href='/paginationSSR'>
20 |         <a>See it working</a>
21 |       </Link>{" "}
22 |       <a href='https://github.com/elisabeth-leonhardt/react-query-pagination/tree/main/pages'>
23 |         See the code
24 |       </a>
25 |       <h1>Explore how I implemented an infinite scroll:</h1>
26 |       <a href='https://dev.to/elisabethleonhardt/easy-and-quick-infinite-scroll-with-nextjs-and-react-query-36lh'>
27 |         Read the Article
28 |       </a>
29 |       <Link href='/infiniteCSR'>
30 |         <a>See it working</a>
31 |       </Link>{" "}
32 |       <a href='https://github.com/elisabeth-leonhardt/react-query-pagination/tree/main/pages'>
33 |         See the code
34 |       </a>
35 |     </div>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 | }
 8 | 
 9 | * {
10 |   box-sizing: border-box;
11 | }
12 | 
13 | h1 {
14 |   text-align: center;
15 | }
16 | 
17 | h2 {
18 |   padding-top: 1rem;
19 | }
20 | 
21 | #welcome {
22 |   max-width: 1300px;
23 |   margin: auto;
24 | }
25 | 
26 | #welcome a {
27 |   border: 2px solid black;
28 |   border-radius: 10px;
29 |   padding: 1rem;
30 |   margin-right: 1rem;
31 |   color: black;
32 |   text-decoration: none;
33 | }
34 | .grid-container {
35 |   display: grid;
36 |   grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
37 |   gap: 2rem;
38 |   max-width: 1300px;
39 |   width: 100%;
40 |   margin: auto;
41 |   padding: 2rem;
42 | }
43 | 
44 | article {
45 |   display: flex;
46 |   flex-direction: column;
47 |   align-items: center;
48 |   text-align: center;
49 |   border-radius: 0.5em;
50 |   overflow: hidden;
51 |   box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
52 |   padding-bottom: 1rem;
53 | }
54 | 
55 | article > *:not(img) {
56 |   padding-inline: 1rem;
57 | }
58 | 
59 | article img {
60 |   object-fit: cover;
61 | }
62 | 
63 | .pagination {
64 |   max-width: 1300px;
65 |   width: 100%;
66 |   margin: auto;
67 |   justify-content: center;
68 |   display: flex;
69 | }
70 | 
71 | .pagination:nth-of-type(2) {
72 |   margin-bottom: 2rem;
73 | }
74 | 


--------------------------------------------------------------------------------
/pages/infiniteCSR.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import InfiniteScroll from "react-infinite-scroll-component";
 3 | import { useInfiniteQuery } from "react-query";
 4 | 
 5 | function InfiniteCSRPage() {
 6 |   const { data, status, fetchNextPage, hasNextPage } = useInfiniteQuery(
 7 |     "infiniteCharacters",
 8 |     async ({ pageParam = 1 }) =>
 9 |       await fetch(
10 |         `https://rickandmortyapi.com/api/character/?page=${pageParam}`
11 |       ).then((result) => result.json()),
12 |     {
13 |       getNextPageParam: (lastPage, pages) => {
14 |         if (lastPage.info.next) {
15 |           return pages.length + 1;
16 |         }
17 |       },
18 |     }
19 |   );
20 |   return (
21 |     <div>
22 |       <h1>
23 |         Rick and Morty with React Query and Infinite Scroll - Client Side
24 |         Rendered
25 |       </h1>
26 |       {status === "success" && (
27 |         <InfiniteScroll
28 |           dataLength={data?.pages.length * 20}
29 |           next={fetchNextPage}
30 |           hasMore={hasNextPage}
31 |           loader={<h4>Loading...</h4>}
32 |         >
33 |           <div className='grid-container'>
34 |             {data?.pages.map((page) => (
35 |               <>
36 |                 {page.results.map((character) => (
37 |                   <article key={character.id}>
38 |                     <img
39 |                       src={character.image}
40 |                       alt={character.name}
41 |                       height={250}
42 |                       loading='lazy'
43 |                       width={"100%"}
44 |                     />
45 |                     <div className='text'>
46 |                       <p>Name: {character.name}</p>
47 |                       <p>Lives in: {character.location.name}</p>
48 |                       <p>Species: {character.species}</p>
49 |                       <i>Id: {character.id} </i>
50 |                     </div>
51 |                   </article>
52 |                 ))}
53 |               </>
54 |             ))}
55 |           </div>
56 |         </InfiniteScroll>
57 |       )}
58 |     </div>
59 |   );
60 | }
61 | 
62 | export default InfiniteCSRPage;
63 | 


--------------------------------------------------------------------------------
/pages/paginationCSR.js:
--------------------------------------------------------------------------------
 1 | import { useQuery } from "react-query";
 2 | import Pagination from "@material-ui/lab/Pagination";
 3 | import { useEffect, useState } from "react";
 4 | import { useRouter } from "next/router";
 5 | 
 6 | export default function PaginationPage(props) {
 7 |   const router = useRouter();
 8 |   const [page, setPage] = useState(1);
 9 |   const { data } = useQuery(
10 |     ["characters", page],
11 |     async () =>
12 |       await fetch(
13 |         `https://rickandmortyapi.com/api/character/?page=${page}`
14 |       ).then((result) => result.json()),
15 |     {
16 |       keepPreviousData: true,
17 |     }
18 |   );
19 |   function handlePaginationChange(e, value) {
20 |     setPage(value);
21 |     router.push(`paginationCSR/?page=${value}`, undefined, { shallow: true });
22 |   }
23 |   useEffect(() => {
24 |     if (router.query.page) {
25 |       setPage(parseInt(router.query.page));
26 |     }
27 |   }, [router.query.page]);
28 |   return (
29 |     <div>
30 |       <h1>
31 |         Rick and Morty with React Query and Pagination - Client Side Rendered
32 |       </h1>
33 |       <Pagination
34 |         count={data?.info.pages}
35 |         variant='outlined'
36 |         color='primary'
37 |         className='pagination'
38 |         page={page}
39 |         onChange={handlePaginationChange}
40 |       />
41 |       <div className='grid-container'>
42 |         {data?.results?.map((character) => (
43 |           <article key={character.id}>
44 |             <img
45 |               src={character.image}
46 |               alt={character.name}
47 |               height={250}
48 |               loading='lazy'
49 |               width={"100%"}
50 |             />
51 |             <div className='text'>
52 |               <p>Name: {character.name}</p>
53 |               <p>Lives in: {character.location.name}</p>
54 |               <p>Species: {character.species}</p>
55 |               <i>Id: {character.id} </i>
56 |             </div>
57 |           </article>
58 |         ))}
59 |       </div>
60 |       <Pagination
61 |         count={data?.info.pages}
62 |         variant='outlined'
63 |         color='primary'
64 |         className='pagination'
65 |         page={page}
66 |         onChange={handlePaginationChange}
67 |       />
68 |     </div>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   padding: 0 2rem;
  3 | }
  4 | 
  5 | .main {
  6 |   min-height: 100vh;
  7 |   padding: 4rem 0;
  8 |   flex: 1;
  9 |   display: flex;
 10 |   flex-direction: column;
 11 |   justify-content: center;
 12 |   align-items: center;
 13 | }
 14 | 
 15 | .footer {
 16 |   display: flex;
 17 |   flex: 1;
 18 |   padding: 2rem 0;
 19 |   border-top: 1px solid #eaeaea;
 20 |   justify-content: center;
 21 |   align-items: center;
 22 | }
 23 | 
 24 | .footer a {
 25 |   display: flex;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 |   flex-grow: 1;
 29 | }
 30 | 
 31 | .title a {
 32 |   color: #0070f3;
 33 |   text-decoration: none;
 34 | }
 35 | 
 36 | .title a:hover,
 37 | .title a:focus,
 38 | .title a:active {
 39 |   text-decoration: underline;
 40 | }
 41 | 
 42 | .title {
 43 |   margin: 0;
 44 |   line-height: 1.15;
 45 |   font-size: 4rem;
 46 | }
 47 | 
 48 | .title,
 49 | .description {
 50 |   text-align: center;
 51 | }
 52 | 
 53 | .description {
 54 |   margin: 4rem 0;
 55 |   line-height: 1.5;
 56 |   font-size: 1.5rem;
 57 | }
 58 | 
 59 | .code {
 60 |   background: #fafafa;
 61 |   border-radius: 5px;
 62 |   padding: 0.75rem;
 63 |   font-size: 1.1rem;
 64 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 65 |     Bitstream Vera Sans Mono, Courier New, monospace;
 66 | }
 67 | 
 68 | .grid {
 69 |   display: flex;
 70 |   align-items: center;
 71 |   justify-content: center;
 72 |   flex-wrap: wrap;
 73 |   max-width: 800px;
 74 | }
 75 | 
 76 | .card {
 77 |   margin: 1rem;
 78 |   padding: 1.5rem;
 79 |   text-align: left;
 80 |   color: inherit;
 81 |   text-decoration: none;
 82 |   border: 1px solid #eaeaea;
 83 |   border-radius: 10px;
 84 |   transition: color 0.15s ease, border-color 0.15s ease;
 85 |   max-width: 300px;
 86 | }
 87 | 
 88 | .card:hover,
 89 | .card:focus,
 90 | .card:active {
 91 |   color: #0070f3;
 92 |   border-color: #0070f3;
 93 | }
 94 | 
 95 | .card h2 {
 96 |   margin: 0 0 1rem 0;
 97 |   font-size: 1.5rem;
 98 | }
 99 | 
100 | .card p {
101 |   margin: 0;
102 |   font-size: 1.25rem;
103 |   line-height: 1.5;
104 | }
105 | 
106 | .logo {
107 |   height: 1em;
108 |   margin-left: 0.5rem;
109 | }
110 | 
111 | @media (max-width: 600px) {
112 |   .grid {
113 |     width: 100%;
114 |     flex-direction: column;
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/pages/paginationSSR.js:
--------------------------------------------------------------------------------
 1 | import { useQuery, dehydrate, QueryClient } from "react-query";
 2 | import Pagination from "@material-ui/lab/Pagination";
 3 | import { useState } from "react";
 4 | import { useRouter } from "next/router";
 5 | 
 6 | export default function paginationSSR(props) {
 7 |   const router = useRouter();
 8 |   const [page, setPage] = useState(parseInt(router.query.page) || 1);
 9 |   const { data } = useQuery(
10 |     ["characters", page],
11 |     async () =>
12 |       await fetch(
13 |         `https://rickandmortyapi.com/api/character/?page=${page}`
14 |       ).then((result) => result.json()),
15 |     {
16 |       keepPreviousData: true,
17 |       refetchOnMount: false,
18 |       refetchOnWindowFocus: false,
19 |     }
20 |   );
21 |   function handlePaginationChange(e, value) {
22 |     setPage(value);
23 |     router.push(`paginationSSR/?page=${value}`, undefined, { shallow: true });
24 |   }
25 |   return (
26 |     <div>
27 |       <h1>
28 |         Rick and Morty with React Query and Pagination - Server Side rendered
29 |       </h1>
30 |       <Pagination
31 |         count={data?.info.pages}
32 |         variant='outlined'
33 |         color='primary'
34 |         className='pagination'
35 |         page={page}
36 |         onChange={handlePaginationChange}
37 |       />
38 |       <div className='grid-container'>
39 |         {data?.results?.map((character) => (
40 |           <article key={character.id}>
41 |             <img
42 |               src={character.image}
43 |               alt={character.name}
44 |               height={250}
45 |               loading='lazy'
46 |               width={"100%"}
47 |             />
48 |             <div className='text'>
49 |               <p>Name: {character.name}</p>
50 |               <p>Lives in: {character.location.name}</p>
51 |               <p>Species: {character.species}</p>
52 |               <i>Id: {character.id} </i>
53 |             </div>
54 |           </article>
55 |         ))}
56 |       </div>
57 |       <Pagination
58 |         count={data?.info.pages}
59 |         variant='outlined'
60 |         color='primary'
61 |         className='pagination'
62 |         page={page}
63 |         onChange={handlePaginationChange}
64 |       />
65 |     </div>
66 |   );
67 | }
68 | 
69 | export async function getServerSideProps(context) {
70 |   let page = 1;
71 |   if (context.query.page) {
72 |     page = parseInt(context.query.page);
73 |   }
74 |   const queryClient = new QueryClient();
75 |   await queryClient.prefetchQuery(
76 |     ["characters", page],
77 |     async () =>
78 |       await fetch(
79 |         `https://rickandmortyapi.com/api/character/?page=${page}`
80 |       ).then((result) => result.json())
81 |   );
82 |   return { props: { dehydratedState: dehydrate(queryClient) } };
83 | }
84 | 


--------------------------------------------------------------------------------