🤺 Mordred
Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
Features
✅ Query any data (Markdown, API, database, CMS) with GraphQL
✅ Framework agnostic, works with any framework that has SSG support
✅ Tons of plugins for popular headless CMS (not yet, we need your contribution!)
Table of Contents
Install
yarn add mordredUsage with Next.js
Configuration
In next.config.js:
module.exports = {
webpack(config) {
const { MordredWebpackPlugin } = require('mordred/webpack')
const mordredPlugin = new MordredWebpackPlugin()
config.plugins.push(mordredPlugin)
return config
},
}Then create a mordred.config.js in the same directory and use some plugins:
module.exports = {
plugins: [
{
resolve: 'mordred-source-filesystem',
options: {
// This is where you'll be creating Markdown files
path: __dirname + '/content',
},
},
{
resolve: 'mordred-transformer-markdown',
},
],
}You also need to install these plugins:
yarn add mordred-source-filesystem mordred-transformer-markdownUsing Data
Create a Markdown file in content folder (in your project root), like content/my-first-posts.md:
---
title: My First Post
date: 2020-04-24
---
This is my **first** post!When you run next or next build, Mordred will generate a GraphQL client at mordred/graphql.js, then you can use the generated client to query data.
Now in any page, query data in getStaticProps:
import { query, gql } from '../mordred/graphql'
export const getStaticProps = async () => {
const { data, errors } = await query(gql`
{
allMarkdown {
nodes {
id
slug
createdAt
updatedAt
html
frontmatter {
# ... or any frontmatter
# like:
title
}
}
}
}
`)
if (errors) {
throw errors[0]
}
return {
props: {
...data,
},
}
}
export default ({ allMarkdown }) => {
return (
<ul>
{allMarkdown.nodes.map((post) => {
return (
<li key={post.id}>
<Link href={`/post/${post.slug}`}>{post.title}</Link>
</li>
)
})}
</ul>
)
}Exploring Data with GraphiQL
You can create an API at /api/graphql to explore data via GraphiQL:
import express from 'express'
import graphqlHTTP from 'express-graphql'
import { schema } from '../../mordred/graphql'
const app = express()
app.use(
graphqlHTTP({
schema,
graphiql: true,
})
)
export default appUsage With Nuxt.js
We're waiting for Nuxt's full-static mode, it's already possible to use Mordred with Nuxt's asyncData though. We'll document this soon.
Plugin List
License
MIT © EGOIST (Kevin Titor)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent