Client Route multiple catch-all pages possible?

[auxray]

Hello, I haven't been able to get Vike to Client Route from one catch-all page to another (different URLs but both point to the "*" catch-all glob route). I've tried different types of +config.ts and +route.ts files and have been through I believe all the docs (spent many hours digging in). I'm using the boilerplate-vue-ts.

This is for an app that has many thousands of URLs/pages in a database for many hosted sites. In the Express catch-all server route, URLs for the requested site are looked up and then validated in the onBeforeRender hook to determine whether to proceed or forward to an error page.

For instance, site A has:
/a-page
/b-page
/c-page

Site B has:
/random-name-page
/another-page
/contact

and so on (all of above point to the "*" route).

Loading the initial requested URL/page (SSR) works, and if I click to a defined page/route then the client-side routing works, but if I click from one catch-all link to another catch-all, the URL in the browser changes, but the page does not transition to the new page and fails to load the data unique to that URL/page (index.pageContext.json file comes through but no re-render). Is there a way to do this?

[brillout]

Have you tried using Route Functions with precedence numbers?

[brillout]

This doesn't seem related to the original post, and it seems be a user land error.

[auxray]

I posted the error screenshot because that happens on app.changePage (might be the root cause).

I have read the documentation over probably 10 times at least to see if I've missed something. After more testing config and other changes, now I am certain this is either a bug in Vike or a use-case the framework does not support. Vike is perfect for our needs if we can just get over this last hurdle.

The reproduction is even simpler than the first one I sent.

Just use the latest boilerplate-vue-ts, add catch-all links to the PageLayout.vue, and add the following files under the "/pages/catch-all" directory.

Here is a repo to quickly reproduce the error:
https://github.com/auxray/boilerplate-vue-ts-catchall

---

+data.ts

export { data }
export type Data = Awaited<ReturnType<typeof data>>

import type { PageContextServer } from 'vike/types'

const data = async (pageContext: PageContextServer) => {
  const randNum = getRandomInt(50);

  console.log(`+data newRand=${randNum}`);

  return {
    randNum,
    title: `${randNum}`
  }
}

function getRandomInt(max: number) {
  return Math.floor(Math.random() * max);
}

---

+Page.vue

<template>
  <h1>Catch-All</h1>
  <ul>
    <li>Rendered to HTML.  ({{ data.randNum }})</li>
    <li>Interactive. <Counter /></li>
  </ul>
</template>

<script lang="ts" setup>
import Counter from './Counter.vue'
import type { Data } from './+data'
import { useData } from '../../renderer/useData'
const data = useData<Data>()
import { usePageContext } from '../../renderer/usePageContext'

const pageContext = usePageContext()
const { urlPathname } = pageContext;
console.log(`+Page newRand=${data.value.randNum}, urlPath=${urlPathname}`);
</script>

---

+route.ts

export {route}

import type {RouteSync} from 'vike/types';
import { resolveRoute } from 'vike/routing'

const route: RouteSync = (pageContext): ReturnType<RouteSync> => {
    const {urlPathname} = pageContext;
    if (isStaticURL(urlPathname)) {
        console.log(`isStatic yes=${urlPathname}`);
        return { precedence: -1 }
    }

    const result = resolveRoute('/*', urlPathname)
    if (!result.match) return { precedence: -1 };

    console.log(`/${result.routeParams?.['*']} === ${urlPathname}`);
    if (`/${result.routeParams?.['*']}` === urlPathname) {
        return {
            precedence: 99,
        };
    }

    return { precedence: -1 };
}

function isStaticURL(urlPathname: string) {
    return urlPathname.indexOf('/index') > -1 || urlPathname.indexOf('/about') > -1
        || urlPathname.indexOf('/star-wars') > -1;
}

---

Counter.vue

<template>
  <button type="button" @click="state.count++">Counter {{ state.count }}</button>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
</script>

---

Catch-all links to add to PageLayout.vue

<Link href="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/hello-1">Hello 1</Link>
<Link href="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/hello-2">Hello 2</Link>
<Link href="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/hello-3">Hello 3</Link>

When you navigate from "star-wars" to one of the "Hello" links, the Hello catch-all renders and routes 100% correctly.

The problem is on navigating from the first catch-all to another catch-all (Hello 1 -> Hello 2). You'll see an error is thrown in the console (screenshot in comment above) and the +data file is not triggered ("+data newRand=" is not logged out). On re-render we should see the number change in "Rendered to HTML..." line (simulating simple data from the server). Are you able to reproduce it? It seems Vike will not re-request or re-render data for the same +Page if it was already rendered on the previous request. This seems like a common-sense expectation that a catch-all can handle unique data for unique URL requests (I can do it in other frameworks). Can a setting be added to Vike to support this? Or please let me know if I am thinking about any of this wrong.

For the +route.ts, it can be reproduced with function or string (the function gets me nothing in this case, just left it in the repo for demo purposes - feel free to change to "export default '*'").

This catch-all data support is an essential feature for us as many URLs will need to get unique data using the same +Page (generating unique +Pages is not an option as there are too many uniques). If this feature is possible, I'd be more than happy to sponsor individually for the first months of this project, and discuss with my company afterwards because this would be a valuable part of our stack.

[phonzammi]

@auxray
Try change the code of useData.ts with this :

export { useData }

import { usePageContext } from './usePageContext'

function useData<Data>(): Data {
  const { data } = usePageContext()
  return data as any
}

or try with vike-vue, you can scaffold it with Bati

[brillout]

New recommended useData() implementation: e2e123e. Both simpler and more robust.

[auxray]

Thank you @phonzammi for this hint. Using this useData or vike-vue did not resolve it, but your comment led me to tinker and at least get the data reactive.

Thank you @brillout for these changes which are way above what I had done. Moving forward with this and Vike has a new sponsor!

[brillout]

led me to tinker and at least get the data reactive

Curious: what did you end up with? Your version may be better than ours!

Thank you a lot for sponsoring 💚 it makes a massive difference for us.

[auxray]

Definitely not better, just a starting point that required calling data as a function from only the catch-all +Page. I'm transitioning from Vue 2/JS to Vue 3/TypeScript and learning the new API, so this needed more research. I was just happy to see it working and needed to figure out the proper way to do it (which you did).

function useData<Data>(): () => Data {
  const data = reactive(() => (usePageContext() as { data: Data }).data)
  return data
}

[brillout]

I tried your version but I'm getting value cannot be made reactive: () => usePageContext().data.

Also tried reactive(usePageContext().data || {}) but that doesn't work either, which makes sense as re-creating a reactive object each time defeats the purpose of reactivity.

I'm surprised your version works for you 🤔

So far I still think e2e123e to be the best, although it has a little bug vikejs/vike-vue#116 but that should be fixed if we delete all previous data.