`+onCreateGlobalContext()` hook

Environment: client, server

Global

Cumulative

Provided by: vike

Hook called when the globalContext object is created.

// pages/+onCreateGlobalContext.js
// Environment: server & client
 
export async function onCreateGlobalContext(globalContext) {
  // The object globalContext was just created
}

// pages/+onCreateGlobalContext.ts
// Environment: server & client
 
import type { GlobalContext } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContext) {
  // The object globalContext was just created
}

You can define:

+onCreateGlobalContext.js => called when globalContext is created (both client and server).
+onCreateGlobalContext.server.js => called when globalContext is created on the server.
+onCreateGlobalContext.client.js => called when globalContext is created on the client.
+onCreateGlobalContext.server.js and +onCreateGlobalContext.server.js => two different onCreateGlobalContext() hooks for server and client.

See also:

Guides > .server.js / .client.js / .shared.js

API > +onCreatePageContext() hook

Use cases

Init

Initializing a globalContext property:

// pages/+onCreateGlobalContext.client.js
// Environment: client
 
export async function onCreateGlobalContext(globalContext) {
  globalContext.someInstance = new Instance()
}

// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import type { GlobalContextClient } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.someInstance = new Instance()
}
 
declare global {
  namespace Vike {
    interface GlobalContextClient {
      someInstance: Instance
    }
  }
}

Global data

Fetching global data that is accessible to all pages:

// pages/+onCreateGlobalContext.server.js
// Environment: server
 
export async function onCreateGlobalContext(globalContext) {
  globalContext.someData = await fetchSomeData()
}

// pages/+onCreateGlobalContext.server.ts
// Environment: server
 
import type { GlobalContextServer } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextServer) {
  globalContext.someData = await fetchSomeData()
}
 
declare global {
  namespace Vike {
    // Extend GlobalContext instead of GlobalContextServer because someData is passed to client
    interface GlobalContext {
      someData: Awaited<ReturnType<typeof fetchSomeData>>
    }
  }
}

// pages/+config.js
 
export default {
  passToClient: ['someData']
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  passToClient: ['someData']
} satisfies Config

+passToClient also works for globalContext.

Authentication

Client-side authentication:

// pages/+onCreateGlobalContext.client.js
// Environment: client
 
export async function onCreateGlobalContext(globalContext) {
  globalContext.loggedInUser = retrieveUserFromCookie()
}

// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import type { GlobalContextClient } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.loggedInUser = retrieveUserFromCookie()
}
 
declare global {
  namespace Vike {
    interface GlobalContextClient {
      loggedInUser: ReturnType<typeof retrieveUserFromCookie>
    }
  }
}

See also: Integration > Authentication > SSG.

Store

Initializing a store on the client-side:

// pages/+onCreateGlobalContext.client.js
// Environment: client
 
import { Store } from 'some-state-management-library'
 
export async function onCreateGlobalContext(globalContext) {
  globalContext.store = new Store()
}

// pages/+onCreateGlobalContext.client.ts
// Environment: client
 
import { Store } from 'some-state-management-library'
import type { GlobalContextClient } from 'vike/types'
 
export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.store = new Store()
}
 
declare global {
  namespace Vike {
    interface GlobalContextClient {
      store: Store
    }
  }
}

On the server-side, the store is typically initialized by using a +onCreatePageContext() hook.

Lifecycle

See API > globalContext > Lifecycle which explains when the globalContext object is created (the onCreateGlobalContext() hook is called immediately afterwards).

+onCreateGlobalContext() hook