Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/mordred
[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
https://github.com/egoist/mordred
inspired-by-gatsby nextjs nuxtjs react ssg ssr vue
Last synced: 2 months ago
JSON representation
[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
- Host: GitHub
- URL: https://github.com/egoist/mordred
- Owner: egoist
- License: mit
- Created: 2020-04-23T15:48:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:20:42.000Z (almost 2 years ago)
- Last Synced: 2024-09-30T02:26:25.906Z (2 months ago)
- Topics: inspired-by-gatsby, nextjs, nuxtjs, react, ssg, ssr, vue
- Language: TypeScript
- Homepage:
- Size: 3.41 MB
- Stars: 205
- Watchers: 10
- Forks: 6
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-NextJs - mordred
README
# ðĪš Mordred
[](https://npm.im/mordred) [](https://chat.egoist.sh)
**Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.**
## Features
â
Inspired by [Gatsby](https://gatsbyjs.org), you can query any data (Markdown, API, database, CMS) with GraphQL
â
Automatically generate JavaScript client for better dev experience
â
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](#install)
- [Usage with Next.js](#usage-with-nextjs)
- [Configuration](#configuration)
- [Using Data](#using-data)
- [Execute Raw Query](#execute-raw-query)
- [Module Alias](#module-alias)
- [Exploring Data with GraphiQL](#exploring-data-with-graphiql)
- [Plugin List](#plugin-list)
- [License](#license)
## Install
```bash
yarn add mordred
```
## Usage with Next.js
### Configuration
In `next.config.js`:
```js
const { withMordred } = require('mordred/next')
module.exports = withMordred({
// Extra Next.js config..
})
```
Then create a `mordred.config.js` in the same directory and use some plugins:
```js
module.exports = {
plugins: [
// Load markdown files from file system
{
resolve: 'mordred-source-filesystem',
options: {
// This is where you'll be creating Markdown files
path: __dirname + '/content',
},
},
// Transform files to markdown nodes
{
resolve: 'mordred-transformer-markdown',
},
],
}
```
You also need to install these plugins:
```bash
yarn add mordred-source-filesystem mordred-transformer-markdown
```
### Using Data
Create a Markdown file in `content` folder (in your project root), like `content/my-first-posts.md`:
```markdown
---
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.
**You should add this folder to `.gitignore`:**
```
mordred/
```
Now in any page, query data in `getStaticProps`:
```js
import { client } from '../mordred/graphql'
export const getStaticProps = async () => {
const { allMarkdown } = await client.query({
allMarkdown: [
{
limit: 20
},
{
nodes: {
id: true,
slug: true,
createdAt: true,
updatedAt: true,
html: true,
frontmatter {
title: true
}
}
}
]
})
return {
props: {
allMarkdown
},
}
}
export default ({ allMarkdown }) => {
return (
-
{post.title}
{allMarkdown.nodes.map((post) => {
return (
)
})}
)
}
```
The `client.query` syntax is very similar to GraphQL SDL except that it also provides type hints as you write, we use [graphql-zeus](https://github.com/graphql-editor/graphql-zeus) to generate the client code.
### Execute Raw Query
If you prefer GraphQL SDL over the JavaScript client, you can execute raw query too:
```js
import { executeQuery, gql } from './path/to/mordred/graphql'
const { data, errors } = await executeQuery(
gql`
query($limit: Int!) {
allMarkdown(limit: $limit) {
id
}
}
`,
{
limit: 20,
},
)
```
Note that we use the `gql` tag here only for syntax highlighting in supported editors like VS Code, it's completely optional.
### Module Alias
When your project has a deep nested folder structure, you might run into _import hell_:
```js
import { client } from '../../mordred/graphql'
```
To simplify the import path, you can use `paths` option in `tsconfig.json`:
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"mordred-graphql": ["./mordred/graphql"]
}
}
}
```
Now you can import form `mordred-graphql` instead.
Note that Next.js supports `paths` by default, but if you're using other tools which don't support this, you might find [alias-hq](https://github.com/davestewart/alias-hq) helpful.
### Exploring Data with GraphiQL
You can create an API at `/api/graphql` to explore data via GraphiQL:
```js
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 app
```
## Plugin List
- [mordred-source-filesystem](/packages/mordred-source-filesystem)
- [mordred-transformer-markdown](/packages/mordred-transformer-markdown)
## License
MIT ÂĐ [EGOIST (Kevin Titor)](https://github.com/sponsors/egoist)