Data Fetching

The default recommendation is to use data() for fetching initial data, and a data tool for data mutations and subsequent data (such as pagination data).

Initial data

For fetching the initial data of a page, we generally recommend using Vike's data() hook but you can also use a tool such as TanStack Query instead.

The `data()` hook

A simple and straightforward way to fetch the initial data of a page is to use the Vike hook data() together with 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, such as data mutations and pagination data, use a data tool.

Data tools

Some tools, such as TanStack Query, can be used to fetch the initial data of a page.

It's a novel approach, and currently, if you have a preference for stability, we recommend using Vike's data() hook instead.

We are currently working on Vike extensions, such as vike-react-query and vike-vue-telefunc, that enable you to use your favorite data tool also for fetching initial data, in a seamless and zero-config fashion.

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 Guides > 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 addtion 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 to fetch global data that is needed by all pages. (For example i18n data.)

You can add your initial data to pageContext at renderPage().

The pageContext object is accessible from any Vike hook and any UI component, thus you can access your initialization data there as well.

If you use pre-rendering then see the workaround described at #962 - New hook onBoot().

State management

For managing complex UI state logic, you can use a store (Redux/Pinia/Zustand/...).

When using a store, all fetched data, including the initial data, is typically managed by the store. We recommend using an extension for automatic integration.

Extensions

Vike extensions for state management tools:

vike-vue-pinia

Contribution welcome to create extensions.

Custom integration

For complete control over integration, instead of using an extension, you can manually integrate a store yourself. See Integration > Stores.