Data Flow

To understand the event system and when different events occur, it helps to understand Crelte’s data flow.
┌─────────────────────────────────────────────┐
│ Incoming Request                            │
│ build request from: url + state + headers   │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│ Determine Site                              │
│ (or use default)                            │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│ beforeRequest (event)                       │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│ Site mismatch?                              │
│ → redirect to acceptLang-matching site      │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│ onRequest (call)                            │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
             ┌─────────── PARALLEL ───────────┐
             │                                │
             ▼                                ▼
┌─────────────────────────┐      ┌─────────────────────────┐
│ app.loadGlobalData [^1] │      │ loadEntry (event)       │
│ loadGlobalData (event)  │      │ app.loadEntry [^2]      │
│ plugin.loadGlobalData   │      └────────────┬────────────┘
└───────────┬─────────────┘                   │
            │                                 ▼
            │                    ┌─────────────────────────┐
            │                    │ afterLoadEntry (event)  │
            │                    └────────────┬────────────┘
            │                                 │
            │                                 ▼
            │                    ┌─────────────────────────┐
            │                    │ loadTemplates           │
            │                    │ (from app.templates)    │
            │                    └────────────┬────────────┘
            └──────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│ template.loadData (if defined)              │
│ app.loadEntryData (if defined)              │
│ loadData (event)                            │
│ plugin.loadData                             │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│ Convert to Route                            │
└──────────────────────┬──────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────┐
│ Render                                      │
│ - route notify                              │
│ - site notify                               │
│ - entry notify                              │
│ - onRoute                                   │
│ - globalsUpdate                             │
│ - beforeRender (event)                      │
│ - plugin.render                             │
│ - update the dom                            │
│ - afterRender (event)                       │
└─────────────────────────────────────────────┘
[^1]: If app.loadGlobalData is not defined, Crelte automatically loads global.graphql.
The returned data is then set as globals.
[^2]: If app.loadEntry is empty or not defined, Crelte automatically loads entry.graphql using the queryEntry helper. Passing a GraphQL query to app.loadEntry also results in an automatic call to queryEntry. This will not happen if the loadEntry event returned an entry.
Data Flow ​

Data Flow
