TRPC error handling
Hey guys. I'm currently looking for some advice in regards to handling errors on my trpc endpoints.
My current implementation is as follows:
This is a quick example showing what i would like to display when an error occurs, but it doesn't feel very nice... is there any alternatives?
My current implementation is as follows:
const TicketOverview = () => {
const [hasRan, setHasRan] = useState(false);
const session = useSession();
const theme = useMantineTheme();
const { guildId } = useRouter().query;
const isFetching = useIsFetching();
const isMutating = useIsMutating();
const isRestoring = useIsRestoring();
const { data: guild, error: guildError } = api.guilds.guild.useQuery(
{
guildId: guildId as string,
},
{ enabled: !!guildId }
);
const { data: guildChannels, error: channelError } =
api.guilds.guildChannels.useQuery(
{
guildId: guildId as string,
},
{ enabled: !!guildId }
);
const { data: guildCategories, error: categoryError } =
api.guilds.guildCategories.useQuery(
{
guildId: guildId as string,
},
{ enabled: !!guildId }
);
// if any of the queries are still in progress...
if (session.status === 'loading' || isFetching || isRestoring || isMutating)
return <Loading />;
if (guildError || channelError || categoryError) {
return (
<div>
{guildError?.message ||
channelError?.message ||
categoryError?.message
}
</div>
);
}
return (
<div>
<h1>Pages content...</h1>
</div>
)
}const TicketOverview = () => {
const [hasRan, setHasRan] = useState(false);
const session = useSession();
const theme = useMantineTheme();
const { guildId } = useRouter().query;
const isFetching = useIsFetching();
const isMutating = useIsMutating();
const isRestoring = useIsRestoring();
const { data: guild, error: guildError } = api.guilds.guild.useQuery(
{
guildId: guildId as string,
},
{ enabled: !!guildId }
);
const { data: guildChannels, error: channelError } =
api.guilds.guildChannels.useQuery(
{
guildId: guildId as string,
},
{ enabled: !!guildId }
);
const { data: guildCategories, error: categoryError } =
api.guilds.guildCategories.useQuery(
{
guildId: guildId as string,
},
{ enabled: !!guildId }
);
// if any of the queries are still in progress...
if (session.status === 'loading' || isFetching || isRestoring || isMutating)
return <Loading />;
if (guildError || channelError || categoryError) {
return (
<div>
{guildError?.message ||
channelError?.message ||
categoryError?.message
}
</div>
);
}
return (
<div>
<h1>Pages content...</h1>
</div>
)
}This is a quick example showing what i would like to display when an error occurs, but it doesn't feel very nice... is there any alternatives?
