❓-help

is there a way to call useQuery() from a callback and get the return value within that callback?

TTom

5/8/2023

I have a generic component that is effectively an autocomplete that fills in options from a web request. The component takes a callback which takes in the newest search string and should perform a web request to get the autocomplete options and return them. Is there a way I can call a trpc useQuery() and get the return value within this async callback? Thanks.

Nnlucas

5/8/2023

You should put the current search string into state and use the state to drive the query instead, this is the react-query way You will probably want to debounce the state slightly, but there are many examples of useDebounce hooks for this

TTom

5/8/2023

That’s not how the component works though. The component has denouncing built in it just needs to take an async function to fetch the data. There’s really no way to call the function and just get a result returned?

Nnlucas

5/8/2023

The component is built wrong 🙂

TTom

5/8/2023

I mean….. idk it’s kind of built like react query…. It takes an arena function and handles calling it and updating the state for you. Kind of the same idea Idk. Seems like a stretch to say it’s built wrong Biased cause I wrote it though. But it wad extensible to work with any async function

Nnlucas

5/9/2023

The react way is to drive UI from state, and make components either controlled or uncontrolled. It sounds like you've got an uncontrolled component which also passes its internal state upwards. It would be better to make it a controlled component and lift out the state so you can drive the query with it Handling of unhappy paths will get easier using useQuery rather than trying to query in a callback

Looking for more? Join the community!

❓-help

❓-help

Recommended Posts

Using Response with the Next App RouterThe route handlers in the App Router, only receive the Request object, requiring you to use a Respon The only way to access useQuery options without input is passing undefined to it?Is there any other way? seems strange pass undefined to the input query How can I access the trpc context in zod's refine function?To do something like ```ts create: myProcedure .input(myInputSchema.refine(async ({ slug }, ctx)Set Request Headers for individual requests?Hello everyone, I have a simple question, can you somehow add headers to the individual requests ins Get undefined when the refetch function has successfully workedIn my use case, I first disabled the useQuery function because I want it only fetch when I want to. Having trouble to import my AppRouter in my react clientEnvironment: Node v18.15.0 I created my TRPC router in my express app and exported it how -docume Argument of Type not assignableSeeing the following error while trying to establish a connection with the trpc server from the clie Can't I create multiple TRPC React using same Router?Im using monorepo and have 2 client projects on that. I have 2 files that does the same, create the what is architectural style of nextjs + prisma + trpc app?like REST.... or SOA?Types with enabled: falseHow do types work with enabled: false? Do I need to cast my arguments in the cases where enabled is Error: No QueryClient set, use QueryClientProvider to set oneHello! I have wrapped my _app.tsx properly and I have made useQuery functionality possible, however You're trying to use @trpc/server in a non-server environmentEnvironment: Node v18.15.0, yarn, Next 13.2.4 What's wrong: When using `createServerSideHelpers`, i TRPC Middleware w/ InputHello! I was wondering if there is a way to add input fields onto a TRPC middleware. Essentially I Server side headers are not appliedHi guys I have the following trpc client initialized ``` import { createTRPCProxyClient, httpBatchLi Get tRPC procedure latency?Hi all, is there a supported mechanism to run common code to all procedures, say if I want to get la Does or will trpc support http event stream?Does or will trpc support http event stream?Can't get wsLink's retryDelayMs to workI'm trying to add some backoff for when connecting to my websocket server fails. I've got the follow createTRPCNext and createTRPCProxyClient within one NextJs appHey, Is there any possibility to use createTRPCNext and createTRPCProxyClient clients in one NextJs Calling axios requests not workingIf i call an API using axios in trpc query procedure It works if the url is https it dont if url is Best practices in naming and defining procedures when they don't fit into standard buckets?I am loving TRPC and its type safety, but I feel like I'm struggling with the naming of procedures.