Theo's Typesafe Cult•2y ago

Best practice making multiple TRPC calls

I have one component, that needs to make two API calls. The first call callOne, happens on page load. callTwo should happen once the user selects data rendered from callOne, I'm having issue finding an elegant solution to this. My current solution is just the following within the component (this works, but callTwo is called much more than is required, including on page load, and every unrelated prop change).

  // TRPC calls
  const callOne = trpc.auth.getUserDatabases.useQuery();
  const callTwo = trpc.auth.getUserDatabaseFields.useQuery({
    databaseId: selectedDbId || "",
  });

  // Render
  <component dependent on callOne>
  <component dependent on callTwo>
  <component dependent on callTwo>

  // TRPC calls
  const callOne = trpc.auth.getUserDatabases.useQuery();
  const callTwo = trpc.auth.getUserDatabaseFields.useQuery({
    databaseId: selectedDbId || "",
  });

  // Render
  <component dependent on callOne>
  <component dependent on callTwo>
  <component dependent on callTwo>

I can think / have tried the following ways; 1) Make the second call in useEffect, that has a dependency on selectedDbId . This works given it were an API call using something like fetch, but making a TRPC call within useEffect results in the error Hooks can only be called inside of the body of a function component. 2) Have component 2/3 in the example conditionally render once the first call is complete. The issue is which component should then make the second call, and how would the data travel between them. 3) I wondered if there were some sort of skip option, such as callTwo = trpc.auth.getUserDatabaseFields.useQuery({ databaseId: selectedDbId || "" }, { skip: !selectedDbId }); as mentioned in apollo docs (https://github.com/trojanowski/react-apollo-hooks/issues/158#issuecomment-599809484) but I can't find anything similar in the TRPC / react-query docs. Some advice would be much appreciated

8 Replies

cje•2y ago

Use the ‘enabled’ option on the second query, set it to callOne.data or whatever

Yoers•2y ago

Thanks @cje, the problem I've now realized with this, is that callTwo will still get re-run when any other prop changes on the component (as-long as callOne.data is now defined). Maybe I could check prevProps and only enable if it has changed, feels a little hacky though for what feels like such a simple case, useEffect seems like it would be the most "react" way to do this (as a side effect of callOne.data changing, go fetch callTwo , but as mentioned it doesn't work.

cje•2y ago

callTwo being rerun doesn’t necessarily mean that it fetches again though Just means it’s allowed to fetch Do you only want it to fetch exactly once?

Yoers•2y ago

Ok this is perhaps my misunderstanding with trpc / react query then, I thought caching is opt-in and callTwo always re-runs given the chance (even if query data is the same). I want callTwo to only re-run, when a particular piece of state changes (selectedDbId which is driven from the data from callOne)

cje•2y ago

The hook being called is different from the data being fetched I’d recommend to set up the React Query dev tools and play around with them a bit To become more familiar with the behaviour If selectedDbId changes, you get a completely new query, so assuming you have the default RQ settings it will always refetch in that situation

Yoers•2y ago

Added it now, makes things clearer for me, my mental model was wrong and a component re-render doesn't invalidate (refetch) any queries, thanks mate. I see another thread with a somewhat similar question, I wonder if we could benefit from some sort of FAQ thread pinned to the top (I'm going to start building one myself, as there's so much to learn from following this question section)

cje•2y ago

we used to have a thing that said "if you have a trpc question its probably a react query question" but i think it might not be possible with the forums format?

Yoers•2y ago

Oh really, yeah that's fair enough, I was thinking yu could just have a single post pinned @ top with different sections of the core t3 tech (Typescript, Next, tailwind etc) and then FAQ's with links to various threads. Might require a bit of maintenance though, and is arguably what the search should provide.

Gaming

Programming

Best practice making multiple TRPC calls