haardik | LearnWeb3 Posts - Answer Overflow

haardik | LearnWeb3

Explore posts from servers

•Created by haardik | LearnWeb3 on 5/9/2023 in #questions

Infer nested type of trpc router return type

I have a tRPC router than returns a nested object through a db query. It looks like this:

ILessonCommentProps.comments: ({
    _count: {
        likes: number;
        comments: number;
        bookmarks: number;
    };
    comments: ({
        user: GetResult<{
            id: string;
            displayName: string | null;
            email: string | null;
            emailVerified: Date | null;
            ... 17 more ...;
            updatedAt: Date;
        }, unknown>;
        subComments: GetResult<...>[];
    } & GetResult<...>)[];
    bookmarks: {
        ...;
    }[];
    likes: {
        ...;
    }[];
} & GetResult<...>) | null

ILessonCommentProps.comments: ({
    _count: {
        likes: number;
        comments: number;
        bookmarks: number;
    };
    comments: ({
        user: GetResult<{
            id: string;
            displayName: string | null;
            email: string | null;
            emailVerified: Date | null;
            ... 17 more ...;
            updatedAt: Date;
        }, unknown>;
        subComments: GetResult<...>[];
    } & GetResult<...>)[];
    bookmarks: {
        ...;
    }[];
    likes: {
        ...;
    }[];
} & GetResult<...>) | null

I'd like to infer the type of the comments property to use as an interface for props on a component. I tried doing this but this doesn't work:

interface ILessonCommentProps {
  comments: AppRouterOutputs['lessonBuilder']['getLessonLikesCommentsBookmarks']['comments'];
}

interface ILessonCommentProps {
  comments: AppRouterOutputs['lessonBuilder']['getLessonLikesCommentsBookmarks']['comments'];
}

I was wondering if this is even possible?

4 replies

TTCTheo's Typesafe Cult

•Created by haardik | LearnWeb3 on 1/24/2023 in #questions

Refetching tRPC query after mutation from a child

Hey, this might be a pretty noob tRPC question as I'm quite new to the whole tRPC + TanStack Query setup. I have a component NotificationPanel which uses tRPC to query unread notifications for a given user. Once it fetches those notifications, it renders multiple NotificationItem elements and passes the notification object to them. The NotificationItem has a x button which uses tRPC mutate to mark itself READ. At this point, i would like the parent NotificationPanel component to re-fetch unread notifications for the user, but am not sure how to achieve this. I tried digging through TanStack Query docs but didn't find much. On Google, most articles are quite outdated and that approach doesn't seem to work well with tRPC's wrapper around TanStack Query. Any ideas how to achieve this?

7 replies

Gaming

Programming