Asaf•5mo 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•5mo 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