venego
venego4w ago

How do I fetch data conditionally?

Sorry if this is a stupid question. I know that there is the mutation queries to do some actions and queries for getting data. I need to get data conditionally, I don't need to get a certain data but only on some specific event, I don't know if there's an option for that like the useMutation and useQuery. I've tried fetch, but it seems like I don't use the right client configuration?
const trpcContext = trpc.useContext();
const translateSelected = await trpcContext.interactiveSubs.fetch(...)
const translateSelected2 = await trpc.interactiveSubs.fetch(...)
const trpcContext = trpc.useContext();
const translateSelected = await trpcContext.interactiveSubs.fetch(...)
const translateSelected2 = await trpc.interactiveSubs.fetch(...)
No description
10 Replies
venego
venegoOP4w ago
I've changed the client to this:
export const trpcClient = createTRPCClient<AppRouter>({
transformer: superjson,
links: [
httpBatchLink({
url: `${vars.serverAddress}/api/trpc`,
],
});
export const trpcClient = createTRPCClient<AppRouter>({
transformer: superjson,
links: [
httpBatchLink({
url: `${vars.serverAddress}/api/trpc`,
],
});
and used it like so:
const translateSelected = await trpcClient.interactiveSubs.translator.query(
{ text: refs.current.processedWords[state.highlightedWordIdx].word }
);
const translateSelected = await trpcClient.interactiveSubs.translator.query(
{ text: refs.current.processedWords[state.highlightedWordIdx].word }
);
but I got these errors:
code: 'BAD_REQUEST',
[cause]: ZodError: [
{
"code": "invalid_type",
"expected": "object",
"received": "undefined",
"path": [],
"message": "Required"
}
]
code: 'BAD_REQUEST',
[cause]: ZodError: [
{
"code": "invalid_type",
"expected": "object",
"received": "undefined",
"path": [],
"message": "Required"
}
]
Seems like it sends undefined instead of the object I've included~
venego
venegoOP4w ago
I tried to mimic the useQuery by sending: input: {"0":{"json":{"text":"Hallo"}}} but still fails with different err: While I've received the data in the server just fine
No description
venego
venegoOP4w ago
No description
tenzerino
tenzerino4w ago
I would recommend using tanstack-react-query or react-query here (could also be that this is also in @trpc/react, not sure), where you can pass an "enabled" option to only fetch when this is or becomes true.
Nick
Nick4w ago
It’s okay to use the vanilla client in the same app as the react query integration, you just won’t benefit from caching unless you manually update the cache You can also use react query’s prefetching APIs
venego
venegoOP4w ago
I thought I'd just fetch data from server without having to use React hooks and store the parameters in some state or ref. I might just skip tRPC for this one and do a simple Express GET request, although it makes things inconsistent.
Nick
Nick4w ago
This is also a valid option depending on use case
venego
venegoOP4w ago
I need to fetch inside an event listener and act independently from the UI. I just think the recommended way is more complex than necessary.
Nick
Nick4w ago
Prefetching or vanilla client then But updating some state which drives a useQuery is more react-query-like
venego
venegoOP4w ago
I'll try to make the vanilla client work, it gave me some error relating to media type, idk...

Did you find this page helpful?