How to use trpc query if input data is not available at mount?

Question

I have a component with a list of conversations and i want to load a specific conversation on click. The problem is that I have to initialise the second trpc query at mount and I dont have the required data yet. Any help would be highly apriciated.

score 1 · Accepted Answer · answered Aug 20 '22 at 08:35

You need to use the enabled flag of useQuery:

const requiredDataIsAvailable = false

trpc.useQuery(['todos'], {
  // query will only fetch data if the following variable evaluates to true
  enabled: requiredDataIsAvailable,
})

Only if enabled is true (= you got the required data for the query), it will fetch the data from the server.

Docs:

How to use trpc query if input data is not available at mount?

1 Answers1