Twan
Twan
TtRPC
Created by Mohammed Anas on 1/9/2024 in #❓-help
client side Validation with ZOD
but doesn't this defeat the purpose of typescript and server validation. I would have ui restrictions but there is no reason to double validate while the server already validates.
12 replies
TtRPC
Created by Mohammed Anas on 1/9/2024 in #❓-help
client side Validation with ZOD
i don't think so, thats why its fully typed so you make sure you set the right properties when sending to the server.
12 replies
TtRPC
Created by Mattèo on 12/31/2023 in #❓-help
How to handle Query Errors on client side (show toast on 401)
Hey, I have had the same issue and what you looking for is creating a link https://trpc.io/docs/client/links#creating-a-custom-link.
export const customLink: TRPCLink<AppRouter> = () => {
// here we just got initialized in the app - this happens once per app
// useful for storing cache for instance
return ({ next, op }) => {
// this is when passing the result to the next link
// each link needs to return an observable which propagates results
return observable(observer => {
const unsubscribe = next(op).subscribe({
next(value) {
// @ts-ignore TODO: fix the typing on these 2 values
if (value.context?.response?.status === 401) {
core.logged_in.set(false);

core.account.set(null);
core.tickets.reset();
core.account.reset();
core.linkingArgs.reset();
core.notifications.reset();
}
},
error(err) {
// @ts-ignore
if (err?.meta?.response?.status === 401) {
core.logged_in.set(false);

core.account.set(null);
core.tickets.reset();
core.account.reset();
core.linkingArgs.reset();
core.notifications.reset();
}

observer.error(err);
},
complete() {
observer.complete();
},
});
return unsubscribe;
});
};
};

export const client = createTRPCProxyClient<AppRouter>({
links: [
customLink,
httpBatchLink({
url: `${core.API_HOST._value}/trpc`,
// You can pass any HTTP headers you wish here
fetch(url: any, options: any) {
return fetch(url, {
...options,
credentials: 'include',
});
},
}),
],
});
export const customLink: TRPCLink<AppRouter> = () => {
// here we just got initialized in the app - this happens once per app
// useful for storing cache for instance
return ({ next, op }) => {
// this is when passing the result to the next link
// each link needs to return an observable which propagates results
return observable(observer => {
const unsubscribe = next(op).subscribe({
next(value) {
// @ts-ignore TODO: fix the typing on these 2 values
if (value.context?.response?.status === 401) {
core.logged_in.set(false);

core.account.set(null);
core.tickets.reset();
core.account.reset();
core.linkingArgs.reset();
core.notifications.reset();
}
},
error(err) {
// @ts-ignore
if (err?.meta?.response?.status === 401) {
core.logged_in.set(false);

core.account.set(null);
core.tickets.reset();
core.account.reset();
core.linkingArgs.reset();
core.notifications.reset();
}

observer.error(err);
},
complete() {
observer.complete();
},
});
return unsubscribe;
});
};
};

export const client = createTRPCProxyClient<AppRouter>({
links: [
customLink,
httpBatchLink({
url: `${core.API_HOST._value}/trpc`,
// You can pass any HTTP headers you wish here
fetch(url: any, options: any) {
return fetch(url, {
...options,
credentials: 'include',
});
},
}),
],
});
3 replies