venego•7d 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(...)

10 Replies

venegoOP•7d 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~

venegoOP•7d 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

venegoOP•7d ago

tenzerino•7d 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•7d 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

venegoOP•7d 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•7d ago

This is also a valid option depending on use case

venegoOP•7d 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•7d ago

Prefetching or vanilla client then But updating some state which drives a useQuery is more react-query-like

venegoOP•7d ago

I'll try to make the vanilla client work, it gave me some error relating to media type, idk...

How do I fetch data conditionally?

Did you find this page helpful?