Gridsome (0.6) + Craft CMS Integration

gridsome.server.js

// Server API makes it possible to hook into various parts of Gridsome
// on server-side and add custom data to the GraphQL data layer.
// Learn more: https://gridsome.org/docs/server-api

// Changes here requires a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

const { setContext } = require('apollo-link-context')
const { HttpLink } = require('apollo-link-http')
const {
  introspectSchema,
  makeRemoteExecutableSchema,
} = require('graphql-tools')
const fetch = require('node-fetch')
const { existsSync } = require('fs')

module.exports = function(api) {
  /****************************************************
    STEP ONE: Stich your remote CraftQL schema into
    the local GraphQL schema.
  ****************************************************/
  api.createSchema(async function(graphql) {
    const http = new HttpLink({
      uri: 'http://example.com/api',
      fetch,
    })

    const link = setContext((request, previousContext) => ({
      headers: {
        Authorization: `Bearer examplebearertoken`,
      },
    })).concat(http)

    const schema = await introspectSchema(link)
    const executableSchema = await makeRemoteExecutableSchema({
      schema: schema,
      link,
    })

    return executableSchema
  })

  /****************************************************
    STEP TWO: Find your entry sections, and create
    routes for any of them that have a template.
  ****************************************************/

  api.createManagedPages(async ({ graphql, createPage }) => {
    // Query our local GraphQL schema to get all sections
    const { data: sectionsQuery } = await graphql(`
      query {
        sections {
          handle
        }
      }
    `)

    // Loop over each section
    await Promise.all(
      sectionsQuery.sections.map(async section => {
        const templatePath = `./src/templates/${section.handle}.vue`
        const templateExists = existsSync(templatePath)

        // If there's not a template for this section in the "templates" directory, don't register it as a route.
        if (!templateExists) return false

        // Query our local GraphQL schema for this section's entries
        const { data: entriesQuery } = await graphql(`
          query {
            entries(section: ${section.handle}) {
              slug,
              id
            }
          }
        `)

        // If this section doesn't have entries, we don't care about it
        if (!entriesQuery) return false

        // Loop through each entry in this section, and register it as a page (route)
        entriesQuery.entries.forEach(entry => {
          createPage({
            path: `/${section.handle}/${entry.slug}`,
            component: `./src/templates/${section.handle}.vue`,

            // Provide variables about this entry which can be used in the entry's tempate, and <page-query>
            context: {
              id: entry.id,
              section: {
                id: section.id,
                handle: section.handle,
              },
            },
          })
        })
      })
    )
  })
}

You'll need to run the following command to install the dependencies needed:

# Yarn
yarn add apollo-link-context apollo-link-http graphql-tools node-fetch --dev

# npm
npm install apollo-link-context apollo-link-http graphql-tools node-fetch --save-dev