Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago
Yoers

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>


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
Was this page helpful?