Dependent Query Pattern

At my work we frequently run into situations where we need dependent queries for a bunch of items and I don't know a great pattern for it.

For example, let's say I have a list of cards and each card has an owner, but only the owner's ID. And say I have a separate endpoint to get details about the owner of the card using their ID. But I need to do that for each card and then combine all that into a "final card list" where each card has the details for the owner as well, not just the ID. How can I do that? Obviously it would be better if the api just returned the completed result with owner data already with each card, but i often don't have that luxury and even have more layers of dependent queries than just one layer in this example.

Crude example (I know I can't conditionally call the hook like that in the forEach, just an rough example of what I'm trying to do):

const Cards = () => {
  const cardsQuery = useCards();

  cardsQuery.data?.forEach((card) => {
    const owner = useCardOwnerDetails(card.ownerId);
  });

  return <div>example</div>;
};

export default Cards;

const Cards = () => {
  const cardsQuery = useCards();

  cardsQuery.data?.forEach((card) => {
    const owner = useCardOwnerDetails(card.ownerId);
  });

  return <div>example</div>;
};

export default Cards;

Right now we are just doing all the api calls in the query function of a single hook and returning the transformed cards. But, it would be great to separate the api calls if possible because other areas of the app need only the useCardOwnerDetails and we loose the caching benefits between the two areas

TanStack•16mo ago•

3 replies

verbal-lime

Dependent Query Pattern

const Cards = () => {
  const cardsQuery = useCards();

  cardsQuery.data?.forEach((card) => {
    const owner = useCardOwnerDetails(card.ownerId);
  });

  return <div>example</div>;
};

export default Cards;

const Cards = () => {
  const cardsQuery = useCards();

  cardsQuery.data?.forEach((card) => {
    const owner = useCardOwnerDetails(card.ownerId);
  });

  return <div>example</div>;
};

export default Cards;

Dependent Query Pattern

Similar Threads

Dependent Query Pattern

Similar Threads

Similar Threads

Similar Threads