Theo's Typesafe Cult•3y 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•3y ago

Message Not Public

amanuelOP•3y 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•3y ago

Message Not Public

Brendonovich•3y ago

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

amanuelOP•3y ago

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

Brendonovich•3y 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•3y ago

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

amanuelOP•3y ago

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

ryanagillie•3y 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•3y ago

Message Not Public

amanuelOP•3y ago

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

amanuelOP•3y ago

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

Custom payment flow

amanuelOP•3y ago

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

ryanagillie•3y 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 })

amanuelOP•3y 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

ryanagillie•3y ago

yeah, just disable refetch on window focus, that's the only thing that causes them to be ran multiple times I disable that globally, v annoying react-query basically does what you just put but better and with a cache

amanuelOP•3y ago

What about this option:

refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")

refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")

ryanagillie•3y ago

I usually just leave that alone? unmounting is the component leaving the page so like, if you leave the page and come back you want it to rerun

Unknown User•3y ago

Message Not Public

ryanagillie•3y ago

https://discord.com/channels/966627436387266600/1047325890578759711

Gaming

Programming

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