Bootstrapping queries

[ptbrowne]

Right now, before any data queries are made by an app, we have to

• Load the page
• Load the JS
• Mount components
• Components needing data will fire up queries

This leads to an important delay to show any data on the cozy.

To remove this delay, I think it would be interesting if the stack could know which queries does an app need before hand, execute the queries and serve the HTML with data that could be picked up by the application and inserted into cozy-client's store.

manifest.webapp

{
  initialQueries: {
    index: { // name of the page
      transactions: {
        type: 'io.cozy.bank.operations',
        selector: {
          ...a mango selector...
        }
      }
    }
  }
}

On cozy-client's instantiation, it could pick up the data (stored in a global JS variable for example like __BOOTSTRAP_DATA__) and populate its store.

This would potentially remove the need for any initial queries on page load.

Advantages

• Simplicity for the app developer, declaring data needs in the manifest is simple
• Declarativeness. The query being declared as data, it is easier to handle. The stack could create the right indexes before the app is launched, could warn the developer if there is something wrong with the query.

Inconvenients

• If initial queries take a long time, the loading of the page is blocked (white page during loading).

Alternatives

Data loading JS bundle + UI JS bundle

An application could use bundling tools to serve two JS, a small one dedicated to data fetching. It would load very fast and fire up the queries. A bigger bundle containing the UI components and the rest of the app could be downloaded in parallel.

Advantages:

• No work on the stack
• JS assets download is not blocked by data fetching queries

Inconvenients:

• Put bundling complexity on the app