How to handle TRPC error with tanstack/query in components

On the server I've got this fairly simple procedure

    getRooms: publicProcedure.query(() => {
        throw new TRPCError({ code: "BAD_REQUEST", message: "Not implemented" });
    }),

    getRooms: publicProcedure.query(() => {
        throw new TRPCError({ code: "BAD_REQUEST", message: "Not implemented" });
    }),

Which I'm trying to handle on client like this:

function MainComponent() {
    const trpcRooms = trpc.getRooms.useQuery();

    useEffect(() => {
        if (trpcRooms.isError) {
            // do something with the error
            console.log(trpcRooms.error);
        }
    }, [trpcRooms.isError, trpcRooms.isLoading]);

function MainComponent() {
    const trpcRooms = trpc.getRooms.useQuery();

    useEffect(() => {
        if (trpcRooms.isError) {
            // do something with the error
            console.log(trpcRooms.error);
        }
    }, [trpcRooms.isError, trpcRooms.isLoading]);

And yet I haven't caught error like this a single time, it always bubbles to the top and being handled by error boundary. (before using boundaries it essentially crashed whole application).

All setup is done as docs saying, with nothing crazy.

export const TRPCWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const url = new URL(window.location.href);
    const host = url.hostname;

    const [queryClient] = useState(
        () =>
            new QueryClient({
                defaultOptions: {
                    queries: {
                        useErrorBoundary: true,
                    },
                    mutations: {
                        useErrorBoundary: true,
                    },
                },
            }),
    );
    const [trpcClient] = useState(() =>
        trpc.createClient({
            transformer: superjson,
            links: [
                loggerLink({
                    enabled: (opts) => (process.env.NODE_ENV === "development" && typeof window !== undefined) || (opts.direction === "down" && opts.result instanceof Error)
                }),
                httpBatchLink({
                    url: `http://${host}:${config.webClient.port}/trpc`,
                }),
            ],
        }),
    );
    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
};

export const TRPCWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const url = new URL(window.location.href);
    const host = url.hostname;

    const [queryClient] = useState(
        () =>
            new QueryClient({
                defaultOptions: {
                    queries: {
                        useErrorBoundary: true,
                    },
                    mutations: {
                        useErrorBoundary: true,
                    },
                },
            }),
    );
    const [trpcClient] = useState(() =>
        trpc.createClient({
            transformer: superjson,
            links: [
                loggerLink({
                    enabled: (opts) => (process.env.NODE_ENV === "development" && typeof window !== undefined) || (opts.direction === "down" && opts.result instanceof Error)
                }),
                httpBatchLink({
                    url: `http://${host}:${config.webClient.port}/trpc`,
                }),
            ],
        }),
    );
    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
};

After hours and hours on end I'm starting to give up on this already, why docs don't provide any proper way of handling errors except for global one, which is essential for creation of robust applications.
Note: I'm not using NextJS, just plain ReactJS application with TRPC client + tanstack query, with express-based TRPC server in a monorepo.
Would be really grateful for help.

How to handle TRPC error with tanstack/query in components

On the server I've got this fairly simple procedure

    getRooms: publicProcedure.query(() => {
        throw new TRPCError({ code: "BAD_REQUEST", message: "Not implemented" });
    }),

    getRooms: publicProcedure.query(() => {
        throw new TRPCError({ code: "BAD_REQUEST", message: "Not implemented" });
    }),

Which I'm trying to handle on client like this:

function MainComponent() {
    const trpcRooms = trpc.getRooms.useQuery();

    useEffect(() => {
        if (trpcRooms.isError) {
            // do something with the error
            console.log(trpcRooms.error);
        }
    }, [trpcRooms.isError, trpcRooms.isLoading]);

function MainComponent() {
    const trpcRooms = trpc.getRooms.useQuery();

    useEffect(() => {
        if (trpcRooms.isError) {
            // do something with the error
            console.log(trpcRooms.error);
        }
    }, [trpcRooms.isError, trpcRooms.isLoading]);

export const TRPCWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const url = new URL(window.location.href);
    const host = url.hostname;

    const [queryClient] = useState(
        () =>
            new QueryClient({
                defaultOptions: {
                    queries: {
                        useErrorBoundary: true,
                    },
                    mutations: {
                        useErrorBoundary: true,
                    },
                },
            }),
    );
    const [trpcClient] = useState(() =>
        trpc.createClient({
            transformer: superjson,
            links: [
                loggerLink({
                    enabled: (opts) => (process.env.NODE_ENV === "development" && typeof window !== undefined) || (opts.direction === "down" && opts.result instanceof Error)
                }),
                httpBatchLink({
                    url: `http://${host}:${config.webClient.port}/trpc`,
                }),
            ],
        }),
    );
    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
};

export const TRPCWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const url = new URL(window.location.href);
    const host = url.hostname;

    const [queryClient] = useState(
        () =>
            new QueryClient({
                defaultOptions: {
                    queries: {
                        useErrorBoundary: true,
                    },
                    mutations: {
                        useErrorBoundary: true,
                    },
                },
            }),
    );
    const [trpcClient] = useState(() =>
        trpc.createClient({
            transformer: superjson,
            links: [
                loggerLink({
                    enabled: (opts) => (process.env.NODE_ENV === "development" && typeof window !== undefined) || (opts.direction === "down" && opts.result instanceof Error)
                }),
                httpBatchLink({
                    url: `http://${host}:${config.webClient.port}/trpc`,
                }),
            ],
        }),
    );
    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
};

How to handle TRPC error with tanstack/query in components

Similar Threads

How to handle TRPC error with tanstack/query in components

Similar Threads

Similar Threads

Similar Threads