ratty-blush

Question about useSuspenseQuery

hello, i have a question regarding query revalidation when the previous time that query threw an error.

5 Replies

ratty-blushOP•4mo ago

this problem won’t happen if i use normal useQuery hook

stormy-gold•4mo ago

You will need to explain your problem a bit more and I highly recommend sharing some code. If you revalidate it should fetch again.

ratty-blushOP•4mo ago

import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { Suspense, useReducer } from "react";
import { ErrorBoundary } from "react-error-boundary";

export const Route = createFileRoute("/query")({
  component: RouteComponent,
});

function RouteComponent() {
  const [show, toggle] = useToggle(false);
  return (
    <div>
      <h1>Query Route</h1>
      <button onClick={toggle}>{show ? "Hide Data" : "Show Data"}</button>
      {show && (
        <ErrorBoundary fallback={<p>Error loading data</p>}>
          <Suspense fallback={<p>Loading...</p>}>
            <Data />
          </Suspense>
        </ErrorBoundary>
      )}
    </div>
  );
}

function useToggle(init: boolean) {
  return useReducer((state: boolean) => !state, init);
}

function Data() {
  const { data } = useData();
  return <p>{data}</p>;
}

function useData() {
  return useSuspenseQuery({
    queryKey: ["data"],
    queryFn: getData,
  });
}

async function getData() {
  console.log("Fetching data...");
  return Promise.reject(new Error("This is an error from the query route!"));
}

import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { Suspense, useReducer } from "react";
import { ErrorBoundary } from "react-error-boundary";

export const Route = createFileRoute("/query")({
  component: RouteComponent,
});

function RouteComponent() {
  const [show, toggle] = useToggle(false);
  return (
    <div>
      <h1>Query Route</h1>
      <button onClick={toggle}>{show ? "Hide Data" : "Show Data"}</button>
      {show && (
        <ErrorBoundary fallback={<p>Error loading data</p>}>
          <Suspense fallback={<p>Loading...</p>}>
            <Data />
          </Suspense>
        </ErrorBoundary>
      )}
    </div>
  );
}

function useToggle(init: boolean) {
  return useReducer((state: boolean) => !state, init);
}

function Data() {
  const { data } = useData();
  return <p>{data}</p>;
}

function useData() {
  return useSuspenseQuery({
    queryKey: ["data"],
    queryFn: getData,
  });
}

async function getData() {
  console.log("Fetching data...");
  return Promise.reject(new Error("This is an error from the query route!"));
}

whenever im using the useSuspenseQuery hook with suspense and error boundary, if the queryFn throws an error, the query won't rerun even if the component that calls the hook remount/unmount

like-gold•4mo ago

You need a QueryErrorResetBoundary: https://tanstack.com/query/latest/docs/framework/react/reference/QueryErrorResetBoundary

QueryErrorResetBoundary | TanStack Query React Docs

When using suspense or throwOnError in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the QueryErrorResetBoundary compone...

ratty-blushOP•4mo ago

thanks a lot

Gaming

Programming

Question about useSuspenseQuery

Did you find this page helpful?