🔍Search
📚 Docs Menu
🌱 Get Started

Data Fetching

The usual recommendation is to use Vike's data() hook for fetching initial data, and another dedicated tool for data mutations and subsequent data (such as pagination data).

Initial data

For fetching the initial data of a page you can use Vike's data() hook, or you can use tools such as TanStack Query instead.

data() hook

You can fetch the initial data of a page by using 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.

Tools

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

Instead of using the +data hook, you can then use any of your components to fetch data, 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 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:

Contributions welcome to create extensions.

Custom integration

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

See also