TanStackT
TanStack•3y ago•
1 reply
spotty-amber

Advice for complex custom hooks

Hey! I’m looking for a good pattern for complex custom hooks. My team is using Orval (https://github.com/anymaniax/orval) to generate TanStack custom hooks for each of our API endpoints. From those generated hooks, I would like to derive results that require >1 of them.

Here’s one example. I’d like to compose the results from two queries. 

$: query1 = createOrvalCustomHook1();
$: query2 = createOrvalCustomHook2();
$: results = getResultsFromQuery1AndQuery2($query1.data, $query2.data);


Ideally, I would like to abstract away the complexity in my own custom hook:

$: results = createMyCustomHook();


Is there a good pattern for createMyCustomHook ?

I see two approaches:

1. Build on top of the Orval-generated custom hooks createOrvalCustomHook1 and createOrvalCustomHook2 . With this approach, I’d like to access a unified TanStack state (e.g. an isSuccess that spans both queries) and query options (e.g. anenabled flag to trigger both queries).
2. Build a custom query hook from scratch. Create a queryFn that calls both the query1 and the query2 endpoints and composes the results. With this approach, I would like to leverage the data in the Query Cache for each of those individual queries.

Any guidance would be appreciated!
GitHub
GitHub - anymaniax/orval: orval is able to generate client with app...
orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 🍺 - GitHub - anymaniax/orval: o...
Was this page helpful?