+data hook cannot access context data which was created by +onPrerenderStart

[richard-unterberg]

Hey guys, and first thanks to the contributors and @brillout for the fantastic vike. Using it a lot and currently deep-diving into prerendering and the pageContext.

While I`m trying to manage to connect a wordpress-rest-api with my prerendered vike I stumbled upon a problem, which let's me a little stuck at this point. Maybe you already saw the problem or can give me a little hint. Hope this just a configuration problem by a confused me.

the main idea is to fetch a set of navigation items from rest-endpoint on the prerender process (build / prod) and store it in the pageContext to get access to the set in my application later on, especially in the data-hook. I saw the hook onPrerenderStart is capable of putting custom stuff into the context when prerendering, so I came up with this code to store data.navigation

/pages/+onPrerenderStart.ts

import axios from 'axios'
import type { OnPrerenderStartAsync, PageContextServer } from 'vike/types'

import { MappedContextPages } from '#lib/types'
import { getLastPartOfUrl } from '#lib/utils'

type WpResponseData = {
  ID: number
  title: string
  url: string
}[]

const onPrerenderStart: OnPrerenderStartAsync = async (
  prerenderContext,
): ReturnType<OnPrerenderStartAsync> => {
  const pageContexts: PageContextServer[] = []

  const response = await axios.get<WpResponseData>(
    `http://somelocalwpsite/wp-json/wp/v2/navigation/main`,
  )
  if (response.status > 400) {
    throw new Error('Failed to fetch data from wp navigation')
  }

  const mappedPages: MappedContextPages = response.data.map(page => ({
    id: page.ID,
    title: page.title,
    permalink: getLastPartOfUrl(page.url) || '',
  }))

  prerenderContext.pageContexts.forEach(pageContext => {
    pageContexts.push({
      ...pageContext,
      navigation: mappedPages, // here the navigation passed to context
    })
  })

  return {
    prerenderContext: {
      pageContexts,
    },
  }
}

export default onPrerenderStart

The result looks promising, for example this is a generated file after the prerendering:
(Also the prerendered HTML-files in dist dir containing the new data.)

dist/client/testpage/index.pageContext.json

{
  "abortReason": "!undefined",
  "_urlRewrite": null,
  "_urlRedirect": "!undefined",
  "abortStatusCode": "!undefined",
  "_abortCall": "!undefined",
  "_pageContextInitIsPassedToClient": "!undefined",
  "_pageId": "/pages/@id",
  "routeParams": { "id": "testpage" },
  "data": {
    "navigation": [
      { "id": 264, "title": "Willkommen", "permalink": "" },
      { "id": 263, "title": "Testseite", "permalink": "testpage" }
    ]
  }
}

Now I wanna access this prerendered navigation from the context in the data() hook, mainly to map the vike pageContext.routeParams.id to the related navigation item found in the navigation to use it's related ID to query a wordpress endpoint directly in the same data hook

But navigation appears to be returned undefined by the data hook and also the rendered html in the started preview (run prod) does not contain the context data anymore.

the data's console.log(navigation) was returned with values, when pre-rendering page on build in console.

/pages/@id/+data.ts

import { PageContextServer } from 'vike/types'

export type MappedContextPages = {
  id: number
  title: string
  permalink: string
}[]

type DataHookResponse = {
  navigation: MappedContextPages
}

const data = async (pageContext: PageContextServer) => {
  const { id: vikepagePermalink } = pageContext.routeParams
  const { navigation } = pageContext

  // when you build it successfully logs the items
  // when you run the page in browser via preview, navigation is not returned anymore
  console.log(navigation)

  const res: DataHookResponse = {
    navigation,
  }

  return {
    ...res,
  }
}

export default data

Surely I don't get the full picture - any idea what I'm missing here or knowledge if is this even possible?

Environment:

• vike + vike-react
• prerender: true
• prod-like (npm run prod / build)
• client-navigation: true

[brillout]

It's bit difficult to get a clear picture of your issue (e.g. some of what you say doesn't match how Vike actually works). So how about this: create a minimal reproduction with what you expect and what happens instead. We can then take it from there, in a step-by-step fashion.

(FYI some users have a similar use case, so it's likely possible to achieve what you want.)

[richard-unterberg]

Hey Rom, I will prepare a repo in the next days!

[richard-unterberg]

@brillout

As I delved deeper into the framework last week, I realized that modifying the pageContext in this way is not supposed and not necessary to achieve my goal(s). Instead; much simpler is providing my own context and some logic to handle it within the data hook.

/pages/@id/+data.ts

import { PageContext } from 'vike/types'

import { getAndCacheNavigation, getAndCacheWpPage } from '#lib/api'

const data = async (pageContext: PageContext) => {
  const { id } = pageContext.routeParams

  // Fetch the page by slug (vike: id) and store the result in a "page cache" (simple Map)
  // Next time this route is requested (client route), the data is taken from this cache without a new fetch
  const wpPageData = await getAndCacheWpPage(id)

  // Fetch, cache, and provide navs for the data hook
  const wpNavigationData = await getAndCacheNavigation(['main', 'footer'])

  return {
    pageData: wpPageData, // serialized page data
    navigationData: wpNavigationData, // serialized nav data
  }
}

export { data }

such simple cache fnc could look like this
lib/api/index.ts - getAndCacheWpPage()

export const WpPageCache = new Map<string, WPPageData['pageData'] | undefined>()

// also a nice spot to handle dispatch events for some state managers (redux ie)
export const getAndCacheWpPage = async (slug: string) => {
  // bypass if cached
  if (WpPageCache.has(slug)) return WpPageCache.get(slug)

  // call: some-wp.com/api/page/{slug}
  const response = await fetch(`${APP_CONFIG.apiUrl}/page/${slug}`)
  if (response.status >= 400) throw render(404, response.statusText)

  const pageResponse: WPPageResponse = await response.json()
  const pageData = {
    slug,
    title: pageResponse.title,
    acf: pageResponse.acf,
  }

  // set client cache
  WpPageCache.set(slug, pageData)
  return pageData
}

In this project almost everything is dynamically routed to a respective WP page, I had to implement this in just two +data.ts hooks: pages/index (the static start page) and pages/@id (all other routes).

since for the very first page user visits is no client-side cache provided, I wrote small hooks to pass this first page/nav (pre-rendered) also to the caches.

This workflow allows Vike to autonomously build upon the data provided via the WP API. This is fantastic!

ps: was the last piece of the puzzle and I'm happy to announce that I am building a headless WP theme with a minimal REST setup, together with a separate pre-rendered Vike frontend, which automatically pre-renders via a GitHub workflow upon saving a page in WordPress. For me this is a strong alternative to the current gatsby integrations, since on the wordpress-end we can work with the native rest api, designing the endpoint directly with PHP in access to the wordpress data. Surely coming up with something on github in the next months, for those who are interested.

Thank you so much!

[richard-unterberg]

ok, found out that I had enabled isomorphic mode app wide 😅, that's why the caching mentioned above is kinda useless in my case, since if client: false - page data is taken from context and that was what I needed. It was just a misconfiguration 👍

[brillout]

Thanks to circling back on this! And, indeed, an example on GitHub would be nice as your setup is quite interesting and very much something Vike aims to support in a first-class fashion. Looking forward to it! We/I can then create a vike.dev/wordpress page (or already now if you think it makes sense).

Also let me know if you believe there is something about Vike's design that is limiting you.