Issue with useQuery using axios with suspense and useErrorBoundary in Nextjs

[mNutella]

I wanna ask how can I handle GET request errors using Axios with ErrorBoundary in Nextjs app?
if I add suspense: true or useErrorBoundary: true(or both) to useQuery then I always get Unhandled Runtime Error: AxiosError: Request failed with status code ....
Without suspense and useErrorBoundary everything works fine.

Main dependencies:

"@tanstack/react-query": "^4.13.0",
"axios": "^1.1.2",
"typescript": "^4.5.3"
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-error-boundary": "^3.1.4",

useQuery call:

import {
  Avatar,
  List,
  ListItem,
  ListItemContent,
  ListItemDecorator,
  Typography,
} from "@mui/joy";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";

const postsEndpoint = "http://localhost:3000/api/post/all";

const fetchPosts = async () => {
  const response = await axios.get(postsEndpoint);
  return response.data;
};

export default function InnerList() {
  const { data } = useQuery(["posts"], fetchPosts, {
    suspense: true,
    useErrorBoundary: true,
  });

  return (
    <List
      aria-labelledby="ellipsis-list-demo"
      sx={{
        "--List-radius": "8px",
        "--List-padding": "4px",
        "--List-gap": "8px",
        "--List-decorator-size": "56px",
      }}
    >
      {data?.map((post) => (
        <ListItem key={post.id}>
          <ListItemDecorator sx={{ alignSelf: "flex-start" }}>
            <Avatar src="/static/images/avatar/1.jpg" />
          </ListItemDecorator>
          <ListItemContent>
            <Typography noWrap>{post.title}</Typography>
            <Typography level="body2">{post.description}</Typography>
          </ListItemContent>
        </ListItem>
      ))}
    </List>
  );
}

ErrorBoundary and Suspense:

import { Suspense } from "react";
import { QueryErrorResetBoundary } from "@tanstack/react-query";
import { ErrorBoundary } from "react-error-boundary";
import { Button, CircularProgress } from "@mui/joy";

import InnerList from "./InnerList";

export default function PostsList() {
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <ErrorBoundary
          onReset={reset}
          fallbackRender={({ resetErrorBoundary }) => (
            <div>
              There was an error!
              <Button onClick={() => resetErrorBoundary()}>Try again</Button>
            </div>
          )}
        >
          <Suspense fallback={<CircularProgress />}>
            <InnerList />
          </Suspense>
        </ErrorBoundary>
      )}
    </QueryErrorResetBoundary>
  );
}

_app.js:

import type { AppProps } from "next/app";
import { Toaster } from "react-hot-toast";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { CssVarsProvider } from "@mui/joy/styles";
import { CacheProvider, EmotionCache } from "@emotion/react";

import createEmotionCache from "@core/utils/emotionCache";
import "@core/styles/global.css";

const queryClient = new QueryClient();

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
emotionCache?: EmotionCache;
}

export default function MyApp({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}: MyAppProps) {
return (
  <CacheProvider value={emotionCache}>
    <CssVarsProvider>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </CssVarsProvider>
    <Toaster />
  </CacheProvider>
);
}

[TkDodo]

basically: suspense doesn't work on the server, don't use it there.

[mNutella]

Got it, thank you for the answer!