kalempster Posts - Answer Overflow

kalempster

Explore posts from servers

RReactiflux DIAdiscord.js - Imagine a boo! 👻SSolidJS TtRPC

•Created by kalempster on 6/9/2024 in #❓-help

Subscription example not behaving like it should

Hey, I've recently wanted to make a subscription route and I've stumbled upon a problem. In the documentation it's said that you should return an observable with a callback that is triggered immediately. That however is not happening. I don't know if I don't understand this correctly of if the example is broken. I'm using [email protected] with @trpc/[email protected].

import { EventEmitter } from "events";
import { initTRPC } from "@trpc/server";
import { observable } from "@trpc/server/observable";
import { z } from "zod";

// create a global event emitter (could be replaced by redis, etc)
const ee = new EventEmitter();

const t = initTRPC.create();

export const appRouter = t.router({
    onAdd: t.procedure.subscription(() => {
        // return an `observable` with a callback which is triggered immediately
        return observable((emit) => {
            console.log("running");

            const onAdd = (data: any) => {
                // emit data to client
                emit.next(data);
            };

            // trigger `onAdd()` when `add` is triggered in our event emitter
            ee.on("add", onAdd);

            // unsubscribe function when client disconnects or stops subscribing
            return () => {
                ee.off("add", onAdd);
            };
        });
    }),
    add: t.procedure
        .input(
            z.object({
                id: z.string().uuid().optional(),
                text: z.string().min(1),
            })
        )
        .mutation(async (opts) => {
            const post = { ...opts.input }; /* [..] add to db */

            ee.emit("add", post);
            return post;
        }),
});

console.log(ee.listeners("add"));

import { EventEmitter } from "events";
import { initTRPC } from "@trpc/server";
import { observable } from "@trpc/server/observable";
import { z } from "zod";

// create a global event emitter (could be replaced by redis, etc)
const ee = new EventEmitter();

const t = initTRPC.create();

export const appRouter = t.router({
    onAdd: t.procedure.subscription(() => {
        // return an `observable` with a callback which is triggered immediately
        return observable((emit) => {
            console.log("running");

            const onAdd = (data: any) => {
                // emit data to client
                emit.next(data);
            };

            // trigger `onAdd()` when `add` is triggered in our event emitter
            ee.on("add", onAdd);

            // unsubscribe function when client disconnects or stops subscribing
            return () => {
                ee.off("add", onAdd);
            };
        });
    }),
    add: t.procedure
        .input(
            z.object({
                id: z.string().uuid().optional(),
                text: z.string().min(1),
            })
        )
        .mutation(async (opts) => {
            const post = { ...opts.input }; /* [..] add to db */

            ee.emit("add", post);
            return post;
        }),
});

console.log(ee.listeners("add"));

The console.log at the end prints [] and I thought the callback is triggered immediately. Any help would be appreciated.

4 replies

SSolidJS

•Created by kalempster on 10/21/2023 in #support

Global store in Solid Start app

Hey, I recently thought to myself that I haven't really done a proper e-commerce app yet that would fill my portfolio. So I decided I would make an e-commerce app with a little bit of a challenge, basically instead of using any SPA framework (React, Solid etc.) I wanted to try Solid Start. At first the experience was great (create-jd-app ❤️ ) however I wanted to implement a cart for the app. I read the Solid Start docs however I was discouraged on using global state. I remember using zustand a lot for any global state applications where I had to synchronise some data between components. And that begs the question, how should I implement a reactive cart, that would influence my navbar (basically showing the number of items in the cart) and would basically be synchronised around my app?

2 replies

SSolidJS

•Created by kalempster on 7/25/2023 in #support

ReactSVG like component in Solid

Hey, I recently was remaking my portfolio website in astro with some solid.js. I wanted to make an interactive carousel which basically displays some items. The problem is I need to dynamically get the SVG's (vite-plugin-solid-svg doesn't work in my case). I remember I used react-svg for that thing that exposed a ReactSVG component with a src prop. I would like to know if this is possible in solid, and if it is, has someone already done it?

5 replies

TtRPC

•Created by kalempster on 3/4/2023 in #❓-help

Error types in catch block

Hey! I have a mutation that I want to catch if the procedure throws an error, I'd like to get the code of the error ("UNAUTHORIZED", "FORBIDDEN" etc.) but TRCPClientError doesn't have full types (basically I can't access the code property). I saw a generic that you can pass to the error but I don't know what to pass as the generic to get the types.

try {
    await mutateAsync(id);
} catch (error) {
    if(error instanceof TRPCClientError<>){
        //Process the error here if unauthorized regenerate accessToken and retry
    }
}

try {
    await mutateAsync(id);
} catch (error) {
    if(error instanceof TRPCClientError<>){
        //Process the error here if unauthorized regenerate accessToken and retry
    }
}

Is there any way to do so?

3 replies

SSolidJS

•Created by kalempster on 3/1/2023 in #support

Animate on scroll in solid

Hey! I've been going through google search after search and I couldn't find any reasonable way to implement animation on scroll (basically if the element should be visible we fade it in). I've tried some interaction observer along with motion one but couldn't work out a solution. Is there any easy way to do so?

7 replies

Gaming

Programming