Daniel Posts - Answer Overflow

Daniel

Explore posts from servers

CDCloudflare Developers TtRPC TTCTheo's Typesafe Cult

•Created by Daniel on 2/19/2024 in #questions

How to call tRPC on the client?

Hi, I have a new t3 app set up, however I can't seem to figure out how to call tRPC functions on the client. The template from tRPC uses server rendering, however, I am using components from NextUI, which means that my app must be client-rendered. I want to get user login info, but that is not available on the client, so I made a tRPC procedure to pass down the user object. Nowhere in the template can I find a way to call tRPC on the frontend. The T3 docs for tRPC references a utils folder with an api.ts folder present, however this doesn't exist for me. The closest I get is shared.ts, but that doesn't seem to do it. What's the proper way to go about this? I'm really confused, and I've used tRPC before, but this is just completely different from what I'm used to. Would really appreciate the help, thanks! Source code: https://github.com/syntheit/rookery Tldr: I'm trying to call getUsers from NavbarRookery, but can't find the client connector.

5 replies

CDCloudflare Developers

•Created by Daniel on 1/8/2024 in #general-help

How do I disable ratelimits for a domain on a Cloudflare Tunnel?

62 replies

TtRPC

•Created by Daniel on 6/13/2023 in #❓-help

Query data is undefined for a bit and is then populated. How to use with React State?

I have an asychronous submit function that's called upon a button press. It refetches the query with the new values and then uses setProductResponse to set the values... if query.data is truthy, which is almost never is unless I spam the button. I know what the problem is and I've ran into this into the past, but I forgot what's the best way to deal with it. The query data is undefined for a short bit while the data is actually being fetched, so I need to set the state afterwards, but I'm not exactly sure how to do so. I thought .then would resolve it, but it didn't. Any help would be much appreciated! Here's my code:

  const query = trpc.multiply.useQuery(
    {
      numberOne: Number(numberOne),
      numberTwo: Number(numberTwo),
    },
    { enabled: false }
  );

  // it's intially undefined, but later isn't.  what's the best practice to handle this?
  const submit = async () => {
    query.refetch().then(() => {
      console.log(query);
      if (query.data) {
        console.log("success!");
        setProductResponse({
          product: query.data.product,
          isSuccess: query.isSuccess,
        });
      } else {
        console.log("failure!");
      }
    });
  };

  const query = trpc.multiply.useQuery(
    {
      numberOne: Number(numberOne),
      numberTwo: Number(numberTwo),
    },
    { enabled: false }
  );

  // it's intially undefined, but later isn't.  what's the best practice to handle this?
  const submit = async () => {
    query.refetch().then(() => {
      console.log(query);
      if (query.data) {
        console.log("success!");
        setProductResponse({
          product: query.data.product,
          isSuccess: query.isSuccess,
        });
      } else {
        console.log("failure!");
      }
    });
  };

5 replies

Gaming

Programming