React Query with Pagination Example

App.js

import React from 'react'
import Character from './components/Character'
import { QueryClientProvider, QueryClient } from 'react-query'

const queryClient = new QueryClient()

function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <Character />
      </QueryClientProvider>
    </div>
  )
}

export default App

components-Character.jsx

import React, { useState } from 'react'
import { useQuery } from 'react-query'
import { CharacterService } from '../services/CharacterService'

export default function Character() {
  const [page, setPage] = useState(1)

  const useCharacters = CharacterService.useCharacters(page)
  const { data, isLoading, isError, isPreviousData, isFetching } = useCharacters

  if (isLoading) return <div>Loading...</div>
  if (isError) return <div>Error</div>
  return (
    <div>
      <h3>List character from rickandmortyapi.com</h3>
      {data.results.map((character) => (
        <div key={character.id}>
          {character.id}. {character.name}
        </div>
      ))}
      <button
        disabled={isPreviousData || page === 1}
        onClick={() => setPage((page) => page - 1)}
      >
        Previous
      </button>
      {/* isPreviousData => Disable the Next button until new data is available */}
      <button
        disabled={isPreviousData || !data.info.next}
        onClick={() => setPage((page) => page + 1)}
      >
        Next
      </button>
      {isFetching ? <span>Loading...</span> : null}
    </div>
  )
}

services-CharacterService.js

import { useQuery } from 'react-query'

export const CharacterService = {
  useCharacters: (page) => {
    const fetchCharacters = async () => {
      const res = await fetch(
        `https://rickandmortyapi.com/api/character?page=${page}`
      )
      return res.json()
    }
    return useQuery(['characters', page], fetchCharacters, {
      keepPreviousData: true,
    })
  },
}