TypeError: Object(...) is not a function with react-query

Question

I had read about this issue before, many of them seem to be an importing issue, but I am not sure in my case. I am following a tutorial to learn about react query, I had double check with the source code and the person that makes the tutorial doesn’t have the issue.

The code that provokes the error:

import React, { useState } from "react";
import { usePaginatedQuery } from "react-query";
import Planet from "./Planet";

const fetchPlanets = async (key, page) => {
  const res = await fetch(`http://swapi.dev/api/planets/?page=${page}`);
  return res.json();
};

const Planets = () => {
  const [page, setPage] = useState(1);
  const { resolvedData, latestData, status } = usePaginatedQuery(
    ["planets", page],
    fetchPlanets
  );

  return (
    <div>
      <h2>Planets</h2>

      {status === "loading" && <div>Loading data</div>}

      {status === "error" && <div>Error fetching data</div>}

      {status === "success" && (
        <>
          <button
            onClick={() => setPage((old) => Math.max(old - 1, 1))}
            disabled={page === 1}
          >
            Previous Page
          </button>
          <span>{page}</span>
          <button
            onClick={() =>
              setPage((old) =>
                !latestData || !latestData.next ? old : old + 1
              )
            }
            disabled={!latestData || !latestData.next}
          >
            Next page
          </button>
          <div>
            {resolvedData.results.map((planet) => (
              <Planet key={planet.name} planet={planet} />
            ))}
          </div>
        </>
      )}
    </div>
  );
};

export default Planets;

The error:

TypeError: Object(...) is not a function
Planets
src/components/Planets.jsx:12
   9 | 
  10 | const Planets = () => {
  11 |   const [page, setPage] = useState(1);
> 12 |   const { resolvedData, latestData, status } = usePaginatedQuery(
  13 |     ["planets", page],
  14 |     fetchPlanets
  15 |   );

What am I doing wrong here and why is this error generated?

The console gives me information that I don’t follow

react-refresh-runtime.development.js:315 Uncaught TypeError: Object(...) is not a function
    at Planets (Planets.jsx:12)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushSync (react-dom.development.js:22467)
    at Object.scheduleRoot (react-dom.development.js:24444)
    at react-refresh-runtime.development.js:284
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:263)
    at RefreshUtils.js:62

Answer 1

In previous versions of React Query, pagination was achieved with usePaginatedQuery(), which has been deprecated.(look at version 3 doc) so you should change code for useQuery and button like this:

  const [page, setPage] = useState(1);
  const { data, status, isPreviousData } = useQuery({
    queryKey: ['planets', page],
    queryFn: () => fetchPlanets(page),
  })

      {status === 'success' && (
        <>
          <button
            onClick={() => setPage(old => Math.max(old - 1, 1))}
            disabled={page === 1}>Previous Page</button>
          <span>{page}</span>
          <button
            onClick={() => {
              if (!isPreviousData && data.next) {
                setPage(old => old + 1)
              }
            }}
            // Disable the Next Page button until we know a next page is available
            disabled={isPreviousData || !data?.next}
          >
            Next Page
          </button>
          <div>
            {data.results.map(planet => <Planet key={planet.name} planet={planet} />)}
          </div>

        </>
      )}

Answer 2

I think it’s still an importing issue. usePaginatedQuery was removed in v3, so make sure you are using v2 when you are using it, or follow the migration guide: https://react-query.tanstack.com/guides/migrating-to-react-query-3#usepaginatedquery-has-been-deprecated-in-favor-of-the-keeppreviousdata-option