Data Fetching

The usual recommendation is:

For fetching a page's initial data, use Vike's +data hook. See Page data with +data.
For data mutations and subsequent data (e.g. pagination), use a tool like tRPC or TanStack Query. See Data mutation & subsequent data.

Page data with `+data`

You can fetch the initial data of a page by using Vike's +data hook, then access it by using the component hook useData().

// /pages/movies/@id/+data.js
// Environment: server
 
export { data }
 
import fetch from 'node-fetch'
 
async function data(pageContext) {
  const { id } = pageContext.routeParams
  const response = await fetch(`https://star-wars.brillout.com/api/films/${id}.json`)
 
  let movie = await response.json()
  // `movie` 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.
  movie = { title: movie.title, release_date: movie.release_date }
 
  // data() runs only on the server-side by default, we can therefore use ORM/SQL queries.
  /* With an ORM:
  const movies = await Movie.findAll({ select: ['title', 'release_date'] }) */
  /* With SQL:
  const movies = await sql.run('SELECT { title, release_date } FROM movies;') */
 
  return {
    movies
  }
}

pageContext holds contextual information, see API > pageContext.

The @id in the file path /pages/movie/@id/+data.js denotes a route parameter which value is available at pageContext.routeParams.id, see Guides > Routing.

// SomeComponent.js
// Environment: server, client
 
import { useData } from 'vike-react/useData'
/* Or:
import { useData } from 'vike-vue/useData'
import { useData } from 'vike-solid/useData'
*/
 
  // Inside a UI component
  const data = useData()
  const { name, price } = data

useData() is implemented by the vike-react/vike-vue/vike-solid. If you don't use vike-react/vike-vue/vike-solid then see API > useData() > Without vike-{react,vue,solid}.

The +data hook can only be used for fetching the initial data of the page. For other use cases, see Data mutation & subsequent data.

Page data with tools

Some data-fetching tools have Vike extensions that enable your components to fetch initial data:

vike-react-query - TanStack Query integration for vike-react
vike-vue-query - TanStack Query integration for vike-vue
vike-solid-query - TanStack Query integration for vike-solid
🚧 vike-react-telefunc - Telefunc integration for vike-react

With these tools, instead of using Vike's +data hook, you can directly fetch data in components, including your <Layout> components.

Data mutation & subsequent data

For data mutation and subsequent data fetching (such as pagination data), use a data tool.

RPC

We generally recommend using RPC. It's simple, flexible, and performant.

For a list of RPC tools, see RPC.

API routes

A common alternative to RPC is to use API routes, see Guides > API Routes.

GraphQL

For large teams, it may make sense to use GraphQL instead of RPC.

With Vike, you can manually integrate GraphQL tools yourself, giving you complete control over integration:

In addition to manual integration, you will soon have the option to use Vike extensions for automatic integration.

Pre-rendering (SSG)

For pre-rendered pages / SSG apps, in order to fetch dynamic data from an external server, make sure to load and execute data() only on the client-side, see API > data() hook > Environment.

Global data

A common use case is fetching global initial data needed by all or several pages — for example, information about the logged-in user or i18n data.

You can add such data to globalContext and/or to pageContext.

The globalContext object is accessible anywhere, while pageContext is accessible from any Vike hook or UI component. See:

State management

See Integration > Store (State Management).