Eternal Mori Posts

Eternal Mori

Posts Comments

TtRPC

•Created by Eternal Mori on 8/30/2023 in #❓-help

Wrong JSON response when deployed

3 replies

TtRPC

•Created by Eternal Mori on 4/21/2023 in #❓-help

How can I make a direct fetch on a router endpoint from TRPC in NextJS on client?

In the documentation you can use the vanilla TRPC client like this:

const bilbo = await client.getUser.query('id_bilbo');

const bilbo = await client.getUser.query('id_bilbo');

But with NextJS app is wrapped with the WithTRPC wrapper. where you can only use hooks. How can I make a direct call?

3 replies

TtRPC

•Created by Eternal Mori on 4/21/2023 in #❓-help

Can you get the queryClient without using a hook?

7 replies

TtRPC

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

How to get response type depending on the input params?

Simple example of a normal JS function with generics:

const example = <T extends unknown>(params: T): T => {
  return params
}

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

// TYPE: const result: readonly ["Hello", "World"]
const result = example(params)

// TYPE: const str1: string, const str2: string
const [str1, str2] = result

const example = <T extends unknown>(params: T): T => {
  return params
}

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

// TYPE: const result: readonly ["Hello", "World"]
const result = example(params)

// TYPE: const str1: string, const str2: string
const [str1, str2] = result

This is what I want to achieve with TRPC. If I send some params I want my respone type be able to change depending on the params. How can I achieve that?

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

const { data } = trpc.router.model.example(params)

// I want the following type returned based on the params 
// TYPE: const result: readonly ["Hello", "World"]
const result = data;

// I want the same result as in the simple example
// TYPE: const str1: string, const str2: string
const [str1, str2] = result

// TYPE: const params: readonly ["Hello", "World"]
const params = ['Hello', 'World']

const { data } = trpc.router.model.example(params)

// I want the following type returned based on the params 
// TYPE: const result: readonly ["Hello", "World"]
const result = data;

// I want the same result as in the simple example
// TYPE: const str1: string, const str2: string
const [str1, str2] = result

6 replies

TtRPC

•Created by Eternal Mori on 3/7/2023 in #❓-help

How to infer types from input?

When I call my procedure from the client I send an array of strings as an input. How can I infer the strings so they are returned in the response (see client code comment) On server:

example: publicProcedure
    .input(z.object({ names: z.array(z.string()) }))
    .query(({ input }) => {
      return input.names.reduce((acc, name) => {
        return {
          ...acc,
          [name]: Math.random(),
        };
      }, {});
    }),

example: publicProcedure
    .input(z.object({ names: z.array(z.string()) }))
    .query(({ input }) => {
      return input.names.reduce((acc, name) => {
        return {
          ...acc,
          [name]: Math.random(),
        };
      }, {});
    }),

On client:

  const { data } = trpc.router.example.useQuery({
    names: ["Hello", "World"]
  })

  // infer types from query input / autocomplete
  const { Hello, World } = data

  const { data } = trpc.router.example.useQuery({
    names: ["Hello", "World"]
  })

  // infer types from query input / autocomplete
  const { Hello, World } = data

3 replies