Search
Docs Menu
API
Get Started
Blog
Edit

useData()

Environment: client, server
Provided by: vike-react/vike-vue/vike-solid

You need vike-react/vike-vue/vike-solid to be able to use useConfig(). If you don't use vike-{react,vue,solid} then see Without vike-{react,vue,solid}.

The useData() component hook allows you to access the value returned by the data() hook.

See Guides > Data Fetching for an introduction about useData() and fetching data in general.

You can also access the data over pageContext.data. In fact const { data } = usePageContext() returns the same value as useData().

Using pageContext.data instead of useData() makes sense if you want to access the data in Vike hooks since useData() only works inside UI components (not inside Vike hooks).

For example:

// /pages/product/@id/SomeComponent.js
// Environment: server & client
 
import { useData } from 'vike-react/useData' // or vike-vue / vike-solid
 
/* ... */
 
// Inside any React/Vue/Solid component
const data = useData()
const { name, price } = data
// /pages/product/@id/SomeComponent.ts
// Environment: server & client
 
import { useData } from 'vike-react/useData' // or vike-vue / vike-solid
import type { Data } from './+data'
 
/* ... */
 
// Inside any React/Vue/Solid component
const data = useData<Data>()
const { name, price } = data
// /pages/product/@id/+data.js
// Environment: server
 
export { data }
 
async function data(pageContext) {
  let product = await Product.findById(pagContext.routeParams.id)
 
  // `product` is serialized and passed to the client. Therefore, we pick only the
  // data the client needs in order to minimize what is sent over the network.
  product = { name: product.name, price: product.price }
 
  return product
}
// /pages/product/@id/+data.ts
// Environment: server
 
export { data }
export type Data = Awaited<ReturnType<typeof data>>
 
import type { PageContextServer } from 'vike/types'
 
async function data(pageContext: PageContextServer) {
  let product = await Product.findById(pagContext.routeParams.id)
 
  // `product` is serialized and passed to the client. Therefore, we pick only the
  // data the client needs in order to minimize what is sent over the network.
  product = { name: product.name, price: product.price }
 
  return product
}

Using type inference as shown above is usually what you want, but if you want to enforce a type instead:

// +data.ts
 
export { data }
export type { Data }
 
import type { PageContextServer } from 'vike/types'
 
type Data = /* the type you want to enforce */
 
function data(pageContext: PageContextServer): Promise<Data> {
  // ...
}

Without vike-{react,vue,solid}

In case you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, you can implement useData() yourself.

In general, for improved DX, we recommend using a useData() implementation. But you don't have to as shown at API > +data() hook > Without vike-{react,vue,solid}.

Examples:

See also