Theo's Typesafe Cult•2y ago

trpc or react-query like set-up for just 1 time calls

Right now I have a handler under /api/something and then I fetch(' /api/something') inside useEffect(). Is there a way to use trpc/react query to just do an api call *once like useEffect(() => {}, []) empty dependency array??

20 Replies

Unknown User•2y ago

Message Not Public

amanuel•2y ago

yeah that's what I arrived at too, I was thinking there would be some other elegant way so I don't have to setState of whatever comes out of fetch you know

Unknown User•2y ago

Message Not Public

Brendonovich•2y ago

If you're using tRPC aren't there vanilla methods that aren't hooks? You might be able to use them inside useEffect.

amanuel•2y ago

Are you able to reference this? I couldn't find it

Brendonovich•2y ago

https://trpc.io/docs/vanilla

Vanilla client | tRPC

The magic of tRPC is making strongly typed API calls without relying on code generation. With full-stack TypeScript projects, you can directly import types from the server into the client! This is a vital part of how tRPC works.

Brendonovich•2y ago

You can do operations with vanillla query and mutation methods, which should be fine inside a useEffect

amanuel•2y ago

Hm, I might have tried this. Let me check again and see if it works.

ryanagillie•2y ago

This looks like just normal rq useQuery usage? Yeah as long as you disable refetchOnWindowFocus it should just run once when the component is loaded

Unknown User•2y ago

Message Not Public

amanuel•2y ago

Ok, so that's all I need to disable?

amanuel•2y ago

Here is reference of what I am trying to do: https://stripe.com/docs/payments/quickstart

Custom payment flow

amanuel•2y ago

It is very critical that it only runs once and I was iffy about all the things I need to disable

ryanagillie•2y ago

if you're posting (which is usually a mutation) you would do something like

const { mutate: whatever } = tRPC.something.whatever.useMutation();

<button onClick={() => whatever()}>Submit</button>

const { mutate: whatever } = tRPC.something.whatever.useMutation();

<button onClick={() => whatever()}>Submit</button>

If it's a query, that's a little tricker, but something like

const whatever = tRPC.something.whatever.useQuery(/* inputs here */, { refetchOnWindowFocus: false })

const whatever = tRPC.something.whatever.useQuery(/* inputs here */, { refetchOnWindowFocus: false })

amanuel•2y ago

So in this particular case:

  React.useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

  React.useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

I tried mutation before, but it was difficult to use since you need to do .mutate() somehwere, and doing it in useEffect will cause infinite loop. Then useQuery can also be used but I am not certain if all refetch options are disabled

Gaming

Programming

trpc or react-query like set-up for just 1 time calls