Data Fetching

data()

The usual way to fetch data is to use the data() Vike hook and the useData() component hook.

// /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
  }
}

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

pageContext holds contextual information, see API > data() hook > pageContext.

// 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 UI framework Vike extension (vike-react/vike-vue/vike-solid). If you don't use vike-react/vike-vue/vike-solid then see API > useData() > Without Vike extension.

The data() hook is only meant for fetching the initial data of a page (in technical words: the SSR data). For other use cases see the sections below API routes and RPC.

API Routes

To perform data mutations and subsequent data fetching (e.g. pagination data), a common technique is to use API routes. But we recommand RPC instead of API routes, see Guides > API Routes.

RPC

RPC enables you to call backend functions remotely from your frontend in a seamless fashion, see Guides > RPC.

We recommend Telefunc wich is maintained by the Vike author.

We recommend using Telefunc to perform data mutations and subsequent data fetching (e.g. pagination data) while using data() for fetching the initial data of a page (in technical words: the SSR data).

With React, you'll soon also be able to use Telefunc to fetch the initial SSR data instead of using the data() hook, see Telefunc > #102.

GraphQL

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

In addtion to manual integration, you will soon also have the option to use Vike Extensions for automatic integration. See #1373 - Vike Extensions: GraphQL.

Store (Vuex/Redux...)

With Vike, you can manually integrate state management stores yourself, giving you complete control over the integration. See:

In addtion to manual integration, you will soon also have the option to use Vike Extensions for automatic integration. See #1374 - Vike Extensions: Data Management Stores (Redux, Vuex, ...).

See also