Call trpc query after click or change

I am trying to fetch some data on a change event

  const handleClientChange = async (value: string) => {
    const result = trpc.client.getOne({ id: value }).useQuery()

  const handleClientChange = async (value: string) => {
    const result = trpc.client.getOne({ id: value }).useQuery()

But I think the query method is not meant to be called like that right?

59 Replies

utdevOP•3y ago

yeah it is a hook I can't call it like that

cje•3y ago

const result = trpc.client.getOne({ id: value }).useQuery({ enabled: false })

function handleEvent() {
    result.refetch();
}

const result = trpc.client.getOne({ id: value }).useQuery({ enabled: false })

function handleEvent() {
    result.refetch();
}

utdevOP•3y ago

hmm ok I see but still get the error that value is not found here can't I pass the id as a param?

cje•3y ago

my bad i just copy pasted your broken code const result = trpc.client.getOne.useQuery({ id: value }, { enabled: false }) function handleEvent() { result.refetch(); } something like this idk check the docs the point is you want to use enabled and refetch

utdevOP•3y ago

yeah I get that point, but I can't find a proper example to run queries on a click or something similiar here https://trpc.io/docs/v10/react-queries

useQuery() | tRPC

The hooks provided by @trpc/react are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on queries.

utdevOP•3y ago

Tried this workaround but does not seem to work aswell

const currentClient = trpc.client.get.useQuery({ id: '' }, { enabled: false })

  const handleClientChange = async (value: string) => {
    // fetch client data from db
    const client = await currentClient.refetch({ id: value })
    console.log('client', client)
    return client
  }

const currentClient = trpc.client.get.useQuery({ id: '' }, { enabled: false })

  const handleClientChange = async (value: string) => {
    // fetch client data from db
    const client = await currentClient.refetch({ id: value })
    console.log('client', client)
    return client
  }

Keef•3y ago

If you want on click behavior you can click at using mutations instead? but either works honestly. The issue with your code seemed to be that value didn't exist I didnt realize you wanted it not run until you call it but anyway, in your onclick all you have to do is refetch as long as your dependencies are valid. I would honestly make this a mutation since it supports passing in params which I never do with queries/ Idk if its even possible

utdevOP•3y ago

I can try that, I always thought to use mutations for like creating,updating and deleting stuff and useQueries for fetching data

Keef•3y ago

Yeah i understand and use that distinction. You can probably make this work but let me look at these docs really quickly

utdevOP•3y ago

thanks, I have going to make some coffee so no hurry 😄

cje•3y ago

Keef•3y ago

This is definitely the more standard way to do things but uh looking at the docs im trying to see if you can pass in props afterwards 🤔

cje•3y ago

i think u guys dont understand how react components work you can just put state in the query param it makes a new one everytime the component rerenders

Keef•3y ago

Yeah I understand but hes trying to force it thru params Ive been using react query for a decadeeeeeeeeeeeeee and havent ever reached for what theyre trying to do.

cje•3y ago

you pass the params when you make the query

Keef•3y ago

Usually you'd use a value from your components context which is from where ever. OP wants the ability to pass in any value or at some point changed his mind on using the standard way

utdevOP•3y ago

Basically on whatever change event I want to trigger the query with my specific id

cje•3y ago

but the component rerenders everytime any of those things change

Keef•3y ago

yes yes yes As long as the value exists you can jsut pass it in as cje did

cje•3y ago

yea thats what the screenshot i just posted does on form submit it triggers the query with the text state

utdevOP•3y ago

oh I see you are using a seperate state for that

Keef•3y ago

Yeah but it doesnt have to be that either

cje•3y ago

it works with props as well because guess what happens when props change

Keef•3y ago

IT'LL REFETCH KannaCheersYouOn

cje•3y ago

no not necessarily lol refetch happens when you trigger the refetch function

Keef•3y ago

Oh i was referring to in general passing props into your query If you have props attached to your query, changes to them will trigger a refetch of the query itself or atleast a NEW QUERY

utdevOP•3y ago

Soo you say this should work?

export default function MyComponent() {
  const { data: currentClient, refetch: refetchClient } =
    trpc.client.get.useQuery(
      { id: '' },
      { enabled: false, refetchOnWindowFocus: false }
      )
    
   const handleClientChange = async (value: string) => {
    // fetch client data from db
    console.log('client changed to: ', value)
    const client = await refetchClient({ id: value })
    console.log('client', client)
    return client
  }

export default function MyComponent() {
  const { data: currentClient, refetch: refetchClient } =
    trpc.client.get.useQuery(
      { id: '' },
      { enabled: false, refetchOnWindowFocus: false }
      )
    
   const handleClientChange = async (value: string) => {
    // fetch client data from db
    console.log('client changed to: ', value)
    const client = await refetchClient({ id: value })
    console.log('client', client)
    return client
  }

cje•3y ago

it makes a new query but it doesn't fetch it

Keef•3y ago

Im referring to general behavior, enabled: false ignored in my statement.

utdevOP•3y ago

Yeah I initially dont want to fetch it

Keef•3y ago

Sorry side tracking your problem

cje•3y ago

so many things wrong with this function doesnt need to be async you dont need to pass anything to the refetch you dont need to return anything

utdevOP•3y ago

Why don't I need to pass anything to refetch? 😕

Keef•3y ago

Your query is dependent on this

{ id: '' }

{ id: '' }

utdevOP•3y ago

yeah I just put that as a "placeholder"

Keef•3y ago

Cje gave you a valid solution where you'd stick to manual refetches but you need to have somekind of state set up to update this value so your query can fetch Using that string is not going to work since you will always be fetching with that data

utdevOP•3y ago

ohh

Keef•3y ago

I dont know if refetch supports what you are trying to do and looking at the docs I thinks that true

utdevOP•3y ago

okok give me a sec

Keef•3y ago

https://tanstack.com/query/v4/docs/reference/useQuery

useQuery | TanStack Query Docs

const { data,

Keef•3y ago

utdevOP•3y ago

This

export default function MyComponent() {
  const [currentClientId, setCurrentClientId] = useState('');
  const { data: currentClient, refetch: refetchClient } =
    trpc.client.get.useQuery(
      { id: currentClientId },
      { enabled: false, refetchOnWindowFocus: false }
      )
    
    
const handleClientChange = (value: string) => {
    // fetch client data from db
    console.log('client changed to: ', value)
    setCurrentClientId(value)
    const client = await refetchClient()
    console.log('client', client)
  }

export default function MyComponent() {
  const [currentClientId, setCurrentClientId] = useState('');
  const { data: currentClient, refetch: refetchClient } =
    trpc.client.get.useQuery(
      { id: currentClientId },
      { enabled: false, refetchOnWindowFocus: false }
      )
    
    
const handleClientChange = (value: string) => {
    // fetch client data from db
    console.log('client changed to: ', value)
    setCurrentClientId(value)
    const client = await refetchClient()
    console.log('client', client)
  }

Keef•3y ago

Why are you passing in params into the refetch You have a value just call refetch and it'll do thing

utdevOP•3y ago

sorry mispasted I think it works now 😄 yay

Keef•3y ago

Some other stuff you can do with RQ is you can set your client ID to a hard state like NULL and use that as your existence clause. Your onclick should just update that state. That update to state should trigger a new query which will invalidate the old

utdevOP•3y ago

more important, I understood it Thanks guys

Keef•3y ago

Take a look at my last message before u leave forever 🥺 RQ is really good with how it handles stuff so you should just use the builtin functionality before reaching to do stuff like that imo @sockenguy

utdevOP•3y ago

But I am doing that right now I think

Keef•3y ago

No u arent

utdevOP•3y ago

I set it in my case to an empty string, with enabled: false it does not query immidiatly, on refetch it queries with my new state set

Keef•3y ago

sure i guess. Your await is unneeded im assuming thats just pseudo code and not actuallywhat you are doing I was just saying try adjusting how your data flows to simplify things

utdevOP•3y ago

yeah I am using it to see the logs

Keef•3y ago

the enabled property is really really good if you take advantage of placeholder state such as enabled: !!user.id which means it wont fetch until the user.id results in a truth

utdevOP•3y ago

true, probably going to need it more for upcoming features 😄

Keef•3y ago

It wont fetch immediately unless user.id already exists so we can basically do what you want with just using enabled and not having to export the refetch but upto you if you want to try it, what you have does work

utdevOP•3y ago

Thanks @CFKeef , appreciate the help!

Keef•3y ago

np np if you do end up trying it and i'm wrong feel free to ping me to correct me, I think it should work? but i'm not testing it rn and it usually works when I work with it in the way I described 😸

utdevOP•3y ago

I will, thanks 👋

Keef•3y ago

export default function MyComponent() {
  const [currentClientId, setCurrentClientId] = useState<string | null>(null);
  const { data: currentClient } =
    trpc.client.get.useQuery(
      { id: currentClientId },
      { enabled: !!currentClientId }
      )
    
    
const handleClientChange =  (value: string) => {
    setCurrentClientId(value)
  }

export default function MyComponent() {
  const [currentClientId, setCurrentClientId] = useState<string | null>(null);
  const { data: currentClient } =
    trpc.client.get.useQuery(
      { id: currentClientId },
      { enabled: !!currentClientId }
      )
    
    
const handleClientChange =  (value: string) => {
    setCurrentClientId(value)
  }

This is how I was describing it gl 😄 Make sure to make use of the other stuff useQuery exports like isLoading to handle the different states your component is in and you are on ur way to being a menace with RQ

Gaming

Programming

Call trpc query after click or change