other-emerald

isError not updated when NextJS API fails

When a request in the NextJS server fails, the error properties do not update. This is my QueryClient config:

const Providers = ({ children }) => {
  return (
    <QueryClientProvider client={new QueryClient({
    defaultOptions: {
      queries: {
        throwOnError: true,
        retry: 3,
      },
    },
  })}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

const Providers = ({ children }) => {
  return (
    <QueryClientProvider client={new QueryClient({
    defaultOptions: {
      queries: {
        throwOnError: true,
        retry: 3,
      },
    },
  })}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

This is my NextJS page:

export default function UserAccount() {
  return (
    <PageProtected>
      ...
    </PageProtected>
  );
}

export default function UserAccount() {
  return (
    <PageProtected>
      ...
    </PageProtected>
  );
}

This is my PageProtected component:

export default function PageProtected({ children }: { children: JSX.Element }) {
  const status = usePageProtected();

  return <LoadingComponent />;
}

export default function PageProtected({ children }: { children: JSX.Element }) {
  const status = usePageProtected();

  return <LoadingComponent />;
}

This is my usePageProtected hook (used in the PageProtected component):

export default function usePageProtected() {
  const { isAuthenticated, isInitializing } = useAuth();

  const { isFetched, isLoading, data, isError } = useGetSelfUser();

  console.log(
    `isInitializing-${isInitializing}-isFetched-${isFetched}-isLoading-${isLoading}-isAuthenticated-${isAuthenticated}-isError-${isError}`
  );

  return PageCheckStatus.LOADING;
}

export default function usePageProtected() {
  const { isAuthenticated, isInitializing } = useAuth();

  const { isFetched, isLoading, data, isError } = useGetSelfUser();

  console.log(
    `isInitializing-${isInitializing}-isFetched-${isFetched}-isLoading-${isLoading}-isAuthenticated-${isAuthenticated}-isError-${isError}`
  );

  return PageCheckStatus.LOADING;
}

This is my useGetSelfUser (API triggered to fetch user details):

const useGetSelfUser = () => {
  const queryKey = queries.user.self.all();

  return useQuery({
    queryKey,
    queryFn: async () => {
      try {
        const response = await fetch(`/123`);
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      } catch (error) {
        console.log("error", error);
      }
    },
  });
};

const useGetSelfUser = () => {
  const queryKey = queries.user.self.all();

  return useQuery({
    queryKey,
    queryFn: async () => {
      try {
        const response = await fetch(`/123`);
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      } catch (error) {
        console.log("error", error);
      }
    },
  });
};

Why the isError does not get updated after the /123 API fails? I am following this: https://tanstack.com/query/latest/docs/framework/react/guides/query-functions?from=reactQueryV3#usage-with-fetch-and-other-clients-that-do-not-throw-by-default

3 Replies

absent-sapphire•16mo ago

Because of retries

other-emeraldOP•16mo ago

i've removed and it continues to not work. also, i've set it to 0 and it does not work as well also, i've set it to false and it does not work

absent-sapphire•16mo ago

Then show a minimal reproduction please

Gaming

Programming

isError not updated when NextJS API fails

Did you find this page helpful?