Jordan (UNCVRD) Posts - Answer Overflow

Jordan (UNCVRD)

Explore posts from servers

•Created by Jordan (UNCVRD) on 10/25/2024 in #help

Response loses type when specifying type arguments manually

Hi there! Just started messing around with Hono and was trying to optimize for typesafety. The docs state that adding the path as a generic parameter can help with type inferencing https://hono.dev/docs/guides/rpc#specify-type-arguments-manually so I gave this a shot

export const WORKSPACE_ROUTE = "/workspace";

// NOTE: added a string generic param
const app = new Hono().get<"/:id/features">("/:id/features", (c) => {
    return c.json({ response: c.req.param("id") });
});

export default app;

const client = hc<typeof app>(WORKSPACE_ROUTE);

export type Client = typeof client;

export const workspaceClient = (...args: Parameters<typeof hc>): Client => hc<typeof app>(...args);

const response = await workspaceClient("/")[":id"].features.$get({ param: { id: "123" } });

export const WORKSPACE_ROUTE = "/workspace";

// NOTE: added a string generic param
const app = new Hono().get<"/:id/features">("/:id/features", (c) => {
    return c.json({ response: c.req.param("id") });
});

export default app;

const client = hc<typeof app>(WORKSPACE_ROUTE);

export type Client = typeof client;

export const workspaceClient = (...args: Parameters<typeof hc>): Client => hc<typeof app>(...args);

const response = await workspaceClient("/")[":id"].features.$get({ param: { id: "123" } });

But my response type from response is: ClientResponse<{}, StatusCode, string> However if I remove the generic parameter (i.e. remove the <"/:id/features">, my response is accurately typed

ClientResponse<{
    response: string;
}, StatusCode, "json">

ClientResponse<{
    response: string;
}, StatusCode, "json">

I was wondering if I was missing something? Or maybe this is not necessary since I'm creating a typed client for re-use:

export type Client = typeof client;

export const workspaceClient = (...args: Parameters<typeof hc>): Client => hc<typeof app>(...args);

export type Client = typeof client;

export const workspaceClient = (...args: Parameters<typeof hc>): Client => hc<typeof app>(...args);

I tried searching around a bit but all the examples I saw in other GH issues or discussions didn't strongly type the path like this. Thanks for any help!

1 replies

TtRPC

•Created by Jordan (UNCVRD) on 12/21/2023 in #❓-help

Unable to mock unstable_batchStreamLink network response

1 replies

TtRPC

•Created by Jordan (UNCVRD) on 1/6/2023 in #❓-help

Should useQueries be able to 'select' data?

1 replies

TtRPC

•Created by Jordan (UNCVRD) on 10/30/2022 in #❓-help

How to execute mutation outside of react context?

Hi! I'm slowly converting code over to v10 - looks great! However, I ran in to an issue when using tRPC within my xstate state machine. I need to run a mutation in one of my states, and since this runs outside of react context, Alex had instructed for me to do the following in v9: 1. set the following property on window in _app.tsx

const trpcClient = trpc.useContext();

const trpcClient = trpc.useContext();

  useEffect(() => {
    if (typeof window !== "undefined") {
      (window as any).trpcClient = trpcClient.client;
    }
  }, [trpcClient])

  useEffect(() => {
    if (typeof window !== "undefined") {
      (window as any).trpcClient = trpcClient.client;
    }
  }, [trpcClient])

2. Then create a helper function:

export const getTRPCClient = (): ReturnType<typeof trpc["useContext"]["client"]> => {
    return (window as any).trpcClient;
};

export const getTRPCClient = (): ReturnType<typeof trpc["useContext"]["client"]> => {
    return (window as any).trpcClient;
};

3. So now I could do the following in my xstate async method:

const client = getTRPCClient();
const url = await client.mutation("...");

const client = getTRPCClient();
const url = await client.mutation("...");

However this approach no longer works with v10. I was curious as to how I should approach this now? Thank you! ---- EDIT: should I just be creating a duplicate vanilla trpc proxy client with essentially the same configuration now? seems a bit redundant though...would be nice to be able to access my mutations like client.myRouter.create.mutate() like i can do with my queries client.myRouter.byId.fetch() Relevant discussions: https://github.com/trpc/trpc/discussions/2926 https://github.com/trpc/trpc/discussions/1351

18 replies

Gaming

Programming