Merging queries from multiple loaders

[thomasheyenbrock]

A rough idea of mine that I wanna validate by posting it here 🙂

Context

Remix does a great job of avoiding request waterfalls by calling all the loaders of the nested routes in parallel. Depending on your application and what your loaders are doing, this might lead to multiple loaders having to fetch the same entity from the database at the same time.

A typical case I can imaging would be a user object. Given the current session, multiple loaders might need to fetch the current user from the database in order to accumulate their data.

General purpose solutions

Something like dataloader might be a general purpose solution for this problem if you do not use GraphQL.

How remix-graphql can help

If you use remix-graphql to process loader requests with GraphQL, the library could actually help you a lot with this! Since GraphQL has a strongly typed schema, we can merge multiple queries from different loaders into one big query that needs to be processed. Once that query is resolved, each loader receives the data that it specifically requested.

So if all loaders contain a request for the user (e.g. { me { firstName, lastName } }), the me field only has to be resolved once instead of resolving it for each loader separately, thus avoiding multiple database queries for the same user.

Loose thoughts

• The main benefit / use-case for this is particularly read-intensive queries which happen multiple times.
• Fetching the same entity multiple times in different loaders might not always be a problem, depending on how costly it is to fetch it or how well your database can handle multiple parallel operations 🤷
• Always merging together all queries would probably actually make the UX worse, because now all your loaders are as slow as the slowest, instead of returning once they have the subset of data that they need to provide.
  • I could imaging that merging queries from different loaders is something that a remix-graphql user opts in to by providing a key argument in the call to processRequestWithGraphql. All queries from loaders with the same key will then be merged together and executed in one run.

---

Feedback appreciated ❤️ 👇