Axios VS. Fetch

[amin1best]

Hi,
Describe the bug
There is no problem when I use fetch for infinite query, but the same request gives an error with axios.

To Reproduce

1. Fetch

import { useInfiniteQuery } from "react-query";
import "./App.css";

const fetchInfiniteUsers = async ({ pageParam = 1 }) => {
  const response = await fetch(`https://reqres.in/api/users?page=${pageParam}`);
  if (!response.ok) {
    throw new Error("wrong");
  }
  return response.json();
};

function App() {
  const { data, isLoading, isFetching, fetchNextPage, hasNextPage } =
    useInfiniteQuery("users", fetchInfiniteUsers, {
      getNextPageParam: (lastPage, pages) => {
        if (lastPage.page < lastPage.total_pages) return lastPage.page + 1;
        return false;
      },
    });

  if (isLoading) return <p>Loading ...</p>;

  return (
    <div className="App">
      {data.pages.map((page) =>
        page.data.map((user) => (
          <p key={user.id}>
            {user.first_name} {user.last_name}
          </p>
        ))
      )}
      {isFetching && <p>Loading ...</p>}
      {hasNextPage && <button onClick={fetchNextPage}>Load More</button>}
    </div>
  );
}

export default App;

2. Axios

import { useInfiniteQuery } from "react-query";
import "./App.css";
import axios from "axios";

const fetchInfiniteUsers = async ({ pageParam = 1 }) => {
  await axios
    .get(`https://reqres.in/api/users?page=${pageParam}`)
    .then(function (response) {
      return response.data;
    })
    .catch(function (error) {
      throw new Error(error);
    });
};

function App() {
  const { data, isLoading, isFetching, fetchNextPage, hasNextPage } =
    useInfiniteQuery("users", fetchInfiniteUsers, {
      getNextPageParam: (lastPage, pages) => {
        if (lastPage.page < lastPage.total_pages) return lastPage.page + 1;
        return false;
      },
    });

  if (isLoading) return <p>Loading ...</p>;

  return (
    <div className="App">
      {data.pages.map((page) =>
        page.data.map((user) => (
          <p key={user.id}>
            {user.first_name} {user.last_name}
          </p>
        ))
      )}
      {isFetching && <p>Loading ...</p>}
      {hasNextPage && <button onClick={fetchNextPage}>Load More</button>}
    </div>
  );
}

export default App;

Expected behavior
The two functions fetchInfiniteUsers have the same output, but in axios, useInfiniteQuery gives an error lastPage is undefined after a few seconds that remain in Loading mode. But fetch works fine.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox 93.0
• react-query: 3.28.0
• axios: 0.23.0

Thanks.

[TkDodo]

I can see multiple issues with your async function in the axios usage:

const fetchInfiniteUsers = async ({ pageParam = 1 }) => {
  await axios
    .get(`https://reqres.in/api/users?page=${pageParam}`)
    .then(function (response) {
      return response.data;
    })
    .catch(function (error) {
      throw new Error(error);
    });
};

1. the main issue: you await the result, but from axios, but don't return it from the functions. So basically, you return a Promise<void>, since async functions always return a Promise.
2. combining .then in an async function is unnecessary, that's what await is for
3. catching the error just to re-throw it does nothing.

I have an written an article to get a better understanding of how async functions work, maybe you want to give it a read?
https://tkdodo.eu/blog/about-async-functions

In the meantime, here is a fetch function with axios that should work:

const fetchInfiniteUsers = async ({ pageParam = 1 }) => {
  const response = await axios.get(`https://reqres.in/api/users?page=${pageParam}`)
  return response.data
}

or, without async/await:

const fetchInfiniteUsers = ({ pageParam = 1 }) => {
  return axios
    .get(`https://reqres.in/api/users?page=${pageParam}`)
    .then(response => response.data)
}

[amin1best]

Thanks @TkDodo for your article about async function and your answer.