Asaf
Asaf9mo ago

is it possible to set a response middleware on Vanilla trpc client?

I have a vue app and I want to set a middleware on the response, whenever I get a response if I find any errors I will show a snackbar of the error, and I want that my trpc...router.query/mutation will never throw an error, because my response middleware will cache it. is it possible to do? to cache the error I can do something like this
links: [
httpBatchLink({
url: 'http://localhost:3000/trpc',
async headers() {
const token = await opts.getToken();
return {
Authorization: `Bearer ${token}`,
};
},
async fetch(url, options) {
const res = await fetch(url, options);
const json = await res.json();

const errors = json.filter((r: any) => r.error).map((r: any) => r.error.json.message);
console.log(json);
console.log(errors);
// TODO: show error notification
Object.assign(res, { json: () => json });
return res;
},
}),

],
links: [
httpBatchLink({
url: 'http://localhost:3000/trpc',
async headers() {
const token = await opts.getToken();
return {
Authorization: `Bearer ${token}`,
};
},
async fetch(url, options) {
const res = await fetch(url, options);
const json = await res.json();

const errors = json.filter((r: any) => r.error).map((r: any) => r.error.json.message);
console.log(json);
console.log(errors);
// TODO: show error notification
Object.assign(res, { json: () => json });
return res;
},
}),

],
but if I don't wrap my
const result = await trpc.api.hello.query();
const result = await trpc.api.hello.query();
in try/catch it will throw an error...
1 Reply
Nick
Nick9mo ago
I expect this would be a Link, which you can definitely write for yourself. But I’m really not totally sure of the capabilities of links without consulting the docs and having a play