Last active
April 24, 2020 20:42
-
-
Save jakedohm/e5736245f35e9b32b29733b2dd37d2c1 to your computer and use it in GitHub Desktop.
Gridsome (0.6) + Craft CMS Integration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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, | |
| }, | |
| }, | |
| }) | |
| }) | |
| }) | |
| ) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You'll need to run the following command to install the dependencies needed: