Techniques for reducing request waterfalls for dependent queries in loaders

// Some route's loader
async function loader(ctx) {
  const { queryClient } = ctx.context;
  const post = await queryClient.ensureQueryData(postQueryOptions(ctx.params.postId));
  // Note this is much slower.
  const authorStats = await queryClient.ensureQueryData(authorStatsOptions(post.authorId));
  // .. maybe other dependent queries
}

// Some route's loader
async function loader(ctx) {
  const { queryClient } = ctx.context;
  const post = await queryClient.ensureQueryData(postQueryOptions(ctx.params.postId));
  // Note this is much slower.
  const authorStats = await queryClient.ensureQueryData(authorStatsOptions(post.authorId));
  // .. maybe other dependent queries
}

1. client --> server
2. server runs all queries
3. client is hydrated en bulk

1. client --> server
2. server runs all queries
3. client is hydrated en bulk

1. client-side nav kicks off the loader
2. client calls server for first query
3. client gets response, then continues loader, starting second query
4. client gets response, potentially kicking off other query

1. client-side nav kicks off the loader
2. client calls server for first query
3. client gets response, then continues loader, starting second query
4. client gets response, potentially kicking off other query