.nickman Posts

.nickman

•Created by .nickman on 7/8/2023 in #❓-help

Type helpers to match available paths

Given a router like this:

const appRouter = t.router({
  post: t.router({
    list: t.procedure
      .query(() => {
        // imaginary db call
        return [{ id: 1, title: 'tRPC is the best!' }];
    }),
    byId: t.procedure
      .input(z.string())
      .query((opts) => {
        // imaginary db call
        return { id: 1, title: 'tRPC is the best!' };
    }),
  }),
});

const appRouter = t.router({
  post: t.router({
    list: t.procedure
      .query(() => {
        // imaginary db call
        return [{ id: 1, title: 'tRPC is the best!' }];
    }),
    byId: t.procedure
      .input(z.string())
      .query((opts) => {
        // imaginary db call
        return { id: 1, title: 'tRPC is the best!' };
    }),
  }),
});

I would like to define a generic function executeTrpc(path, handler), where "path" has to be one of the available paths (post.list or post.byId), and handler is a callback function that asks for the typed input, based on the path that was given. The return type of the method should also get the typed output, based on the path that was given. Are there already Typescript helpers available to achieve something like this? I tried looking trough the library to find what I need, but can't seem to figure it out.

1 replies

TtRPC

•Created by .nickman on 7/4/2023 in #❓-help

useMutation in useEffect dependency array causes infinite loop

I had a very unexpected issue today when testing out some code. I have a simple sum method in tRPC that accepts two numbers and returns the sum. I can change both of the number seperately in state and trigger the mutation every time I see a change in one of the two values (not an ideal way of handling this, but it is test code 😉 )

  const [first, setFirst] = useState(0);
  const [second, setSecond] = useState(0);
  const [sum, setSum] = useState(0);
  const sumMutation = trpcNext.events.sum.useMutation();

  const handleFirstChange = useCallback(
    async (event: ChangeEvent<HTMLInputElement>) => {
      setFirst(+event.target.value);
    },
    []
  );
  const handleSecondChange = useCallback(
    async (event: ChangeEvent<HTMLInputElement>) => {
      setSecond(+event.target.value);
    },
    []
  );

  useEffect(() => {
    debugger;
    sumMutation.mutateAsync({ first, second }).then((result) => {
      setSum(result.output);
    });
  }, [first, second/*, sumMutation*/]);

  const [first, setFirst] = useState(0);
  const [second, setSecond] = useState(0);
  const [sum, setSum] = useState(0);
  const sumMutation = trpcNext.events.sum.useMutation();

  const handleFirstChange = useCallback(
    async (event: ChangeEvent<HTMLInputElement>) => {
      setFirst(+event.target.value);
    },
    []
  );
  const handleSecondChange = useCallback(
    async (event: ChangeEvent<HTMLInputElement>) => {
      setSecond(+event.target.value);
    },
    []
  );

  useEffect(() => {
    debugger;
    sumMutation.mutateAsync({ first, second }).then((result) => {
      setSum(result.output);
    });
  }, [first, second/*, sumMutation*/]);

As you can see I commented out the sumMutation dependency in my useEffect, as adding this causes an infinite loop of calls to the tRPC server. It seems like this mutation is not a stable function and gets re-initialised every single render loop? Is this to be expected? I would assume you want this method to remain stable so it can actually be used inside of hook dependencies? Running on tRPC 10.32.0 right now with no customisation to reqct-query or anything, basic tRPC setup. (in next.js)

3 replies