vps-ssg-demo

(1)travis-framework.config.ts

// travis-framework.config.ts
// Code written by user

export default {
  graphqlServer: {
    url: 'graphql.shopify.dev'
  }
}

(2)posts.vue

<!-- pages/posts.vue -->
<!-- Code written by user -->

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

<script lang="ts">
const pageProps = ['posts']
export default { props: pageProps }
</script>

<script lang="ts" setup>
export const graphqlQquery = `query { posts { id, title, handle } }` 
import { useData } from 'travis-framework'
const { data } = useData()
const posts = computed(() => data.posts)
</script>

(3)_default.page.server.ts

// node_modules/travis-framework/renderer/_default.page.server.ts
// Code written by us

export async function onBeforeRender(pageContext) {
  const { graphqlQuery } = pageContext.pageExports

  const data = await runGraphqlQuery(graphqlQuery)

  return { 
    pageContext: {
       data
    }
  }
}

async function runGraphqlQuery() {
  // ...
}

(4)useData.ts

// node_modules/travis-framework/useData.ts
// Code written by us

// Hook providing `pageContext.data`
export function useData() {
  /* Similar implementation than
   https://github.com/brillout/vite-plugin-ssr/blob/master/boilerplates/boilerplate-vue-ts/renderer/usePageContext.ts
  */
}