sh03 Posts - tRPC

sh03

•Created by sh03 on 12/17/2024 in #❓-help

`useSuspenseQuery` with Remix causes weird "Failed to parse URL from /api" errors

I'm using tRPC with Remix (no loaders, just a client app) and as soon as I converted my codebase from useQuery to useSuspenseQuery I'm now getting "Failed to parse URL from /api". errors in my console and server. It seems as though the queries are being run on the server for some reason (where /api cannot be parsed because window.location is not available). Any ideas what's going on? Is this intended behaviour?

2 replies

TtRPC

•Created by sh03 on 12/12/2024 in #❓-help

SSR in Remix/React Router

Has someone managed by any chance to make tRPC SSR work in Remix/React Router?

2 replies

TtRPC

•Created by sh03 on 12/12/2024 in #❓-help

Simplifying SSR (e.g. in Next.JS)

I'm just trying to figure out if I'm missing something or if somebody else already tries this but: Wouldn't it be theoretically possible, for SSR, to detect when a useQuery is being SSR (e.g. checking typeof window === 'undefined') and therefore await the fetch call automatically and then pass it to initialData to rehydrate on the client?

3 replies

TtRPC

•Created by sh03 on 10/26/2024 in #❓-help

Custom data transformer

Has anyone had any experience with custom data transformers? I'm trying to map LocalDate, LocalTime, Instant, etc. from a date & time library. Every type can be serialized to a string (the corresponding ISO format) but it's unclear to me what the best strategy is via a data transformer? Should I serialize these objects to a custom shape (e.g. { type: "LocalDate", value: "..." }) so that it's trivial to deserialize? Seems kinda redundant since the type information is already at the type level. Without a custom shape it's unclear to me how I would be able to deserialize the object given that I don't know the destination type.

4 replies

TtRPC

•Created by sh03 on 3/9/2024 in #❓-help

The inferred type of 'trpc' cannot be named without a reference

I'm getting the same error as this post: https://discord.com/channels/867764511159091230/1170736851775127564/1170736851775127564 I have a monorepo setup with an api package (copied from https://github.com/t3-oss/create-t3-turbo/tree/main/packages/api) and a server + expo packages similarly copied from that monorepo. Any ideas what I should be looking at to solve this issue?

2 replies

TtRPC

•Created by sh03 on 3/1/2024 in #❓-help

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutation

I'm getting this error:

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.ts(2740) context.d.ts(48, 5): The expected type comes from property 'queryClient' which is declared here on type 'IntrinsicAttributes & TRPCProviderProps<CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>, unknown>'

on line:

<api.Provider client={trpcClient} queryClient={queryClient}>

<api.Provider client={trpcClient} queryClient={queryClient}>

^ (copy pasted from https://trpc.io/docs/client/react/setup) These are my relevant package versions:

    "@tanstack/react-query": "^5.24.1",
    "@trpc/client": "^10.45.1",
    "@trpc/react-query": "^10.45.1",
    "@trpc/server": "^10.45.1",

    "@tanstack/react-query": "^5.24.1",
    "@trpc/client": "^10.45.1",
    "@trpc/react-query": "^10.45.1",
    "@trpc/server": "^10.45.1",

what am I doing wrong?

13 replies

TtRPC

•Created by sh03 on 3/8/2023 in #❓-help

How to organise reusable functions

How do you guys organize functions that all need the same context (usually from tRPC)? For example let's say that you have 10 functions you use multiple times across multiple routers and they all share the same context. Do you use a class?

25 replies

TtRPC

•Created by sh03 on 2/18/2023 in #❓-help

How to manage custom errors (e.g. custom error codes) in tRPC?

What's the recommended way to add fields to a TRPCError? How do you make that typesafe also on the client (e.g. custom error code is a specific union type). Thanks

6 replies

TtRPC

•Created by sh03 on 2/5/2023 in #❓-help

Is there an example of a real world non trivial app?

Something that includes type inference, nested fields, calculated fields, nested React components that use data coming from the backend as prop? The only example app I've found is this: https://todomvc.trpc.io/ But it doesn't have any of the things I mentioned above 😢 Thanks

3 replies

TtRPC

•Created by sh03 on 2/5/2023 in #❓-help

How to organise output types?

I'm having a hard time trying to figure out what the best way to organise output types and I was wondering if you guys/gals have any tips. Things I'm having a hard time with: - Some output objects that may be returned in multiple places (e.g. users.get, users.getAll, posts.get (as Post.author), etc.) all need the same extra fields that can't come directly from Prisma (e.g. "the last post from the user" or "whether one can delete this user"); what's the best way to extract and reuse the logic for these fields? - How to mask output types (e.g. make sure that I don't return User.passwordHash ever) - How to express calculated fields (e.g. fullName = firstName + lastName) - How to reuse output types in nested components (e.g. components that don't directly useQuery) Thanks 🙏

9 replies