Tukukkk

I'm building a project where all my data - including page routes - comes from a GraphQL endpoint but needs to be hosted via a static site (I know, I know. Don't get me started).

I've managed to generate routes statically from the data using the following code in nuxt.config.js:

 generate: {

    routes: () => {

      const uri = 'http://localhost:4000/graphql'

      const apolloFetch = createApolloFetch({ uri })

      const query = `

          query Pages {

           pages {

            slug

            template

            pageContent {

             replaced

             components {

              componentName

              classes

             body

            }

          }

        }

      }

      `



      return apolloFetch({ query }) // all apolloFetch arguments are optional

        .then(result => {

          const { data } = result

          return data.pages.map(page => page.slug)

        })

        .catch(error => {

          console.log('got error')

          console.log(error)

        })

    }

  }

The problem I am trying to solve is that some pages need to use a different layout from the default, the correct layout to use is specified in the GraphQL data as page.template but I don't see any way to pass that information to the router.

I've tried changing return data.pages.map(page => page.slug) to:

  return data.pages.map(page => {

     route: page.slug,

     layout: page.template

    })

but that seems to be a non-starter. Does anyone know how to pass a layout preference to the vue router?