{"id":13433189,"url":"https://github.com/egoist/mordred","last_synced_at":"2025-05-07T21:45:54.125Z","repository":{"id":28445649,"uuid":"258253959","full_name":"egoist/mordred","owner":"egoist","description":"[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.","archived":false,"fork":false,"pushed_at":"2023-01-06T04:20:42.000Z","size":3580,"stargazers_count":205,"open_issues_count":26,"forks_count":5,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-07T21:45:49.285Z","etag":null,"topics":["inspired-by-gatsby","nextjs","nuxtjs","react","ssg","ssr","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/egoist.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-23T15:48:29.000Z","updated_at":"2024-08-17T15:34:46.000Z","dependencies_parsed_at":"2023-01-14T08:50:04.238Z","dependency_job_id":null,"html_url":"https://github.com/egoist/mordred","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fmordred","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fmordred/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fmordred/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fmordred/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/mordred/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252961858,"owners_count":21832192,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inspired-by-gatsby","nextjs","nuxtjs","react","ssg","ssr","vue"],"created_at":"2024-07-31T02:01:22.220Z","updated_at":"2025-05-07T21:45:54.099Z","avatar_url":"https://github.com/egoist.png","language":"TypeScript","funding_links":["https://github.com/sponsors/egoist"],"categories":["TypeScript","miscellaneous","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# 🤺 Mordred\n\n[![npm version](https://flat.badgen.net/npm/v/mordred?scale=1.5)](https://npm.im/mordred) [![community](https://flat.badgen.net/badge/icon/discord?icon=discord\u0026label=community\u0026scale=1.5)](https://chat.egoist.sh)\n\n**Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.**\n\n## Features\n\n✅ Inspired by [Gatsby](https://gatsbyjs.org), you can query any data (Markdown, API, database, CMS) with GraphQL\u003cbr\u003e\n✅ Automatically generate JavaScript client for better dev experience\u003cbr\u003e\n✅ Framework agnostic, works with any framework that has SSG support\u003cbr\u003e\n✅ Tons of plugins for popular headless CMS (not yet, we need your contribution!)\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Install](#install)\n- [Usage with Next.js](#usage-with-nextjs)\n  - [Configuration](#configuration)\n  - [Using Data](#using-data)\n  - [Execute Raw Query](#execute-raw-query)\n  - [Module Alias](#module-alias)\n  - [Exploring Data with GraphiQL](#exploring-data-with-graphiql)\n- [Plugin List](#plugin-list)\n- [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Install\n\n```bash\nyarn add mordred\n```\n\n## Usage with Next.js\n\n### Configuration\n\nIn `next.config.js`:\n\n```js\nconst { withMordred } = require('mordred/next')\n\nmodule.exports = withMordred({\n  // Extra Next.js config..\n})\n```\n\nThen create a `mordred.config.js` in the same directory and use some plugins:\n\n```js\nmodule.exports = {\n  plugins: [\n    // Load markdown files from file system\n    {\n      resolve: 'mordred-source-filesystem',\n      options: {\n        // This is where you'll be creating Markdown files\n        path: __dirname + '/content',\n      },\n    },\n    // Transform files to markdown nodes\n    {\n      resolve: 'mordred-transformer-markdown',\n    },\n  ],\n}\n```\n\nYou also need to install these plugins:\n\n```bash\nyarn add mordred-source-filesystem mordred-transformer-markdown\n```\n\n### Using Data\n\nCreate a Markdown file in `content` folder (in your project root), like `content/my-first-posts.md`:\n\n```markdown\n---\ntitle: My First Post\ndate: 2020-04-24\n---\n\nThis is my **first** post!\n```\n\nWhen 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.\n\n**You should add this folder to `.gitignore`:**\n\n```\nmordred/\n```\n\nNow in any page, query data in `getStaticProps`:\n\n```js\nimport { client } from '../mordred/graphql'\n\nexport const getStaticProps = async () =\u003e {\n  const { allMarkdown } = await client.query({\n    allMarkdown: [\n      {\n        limit: 20\n      },\n      {\n        nodes: {\n          id: true,\n          slug: true,\n          createdAt: true,\n          updatedAt: true,\n          html: true,\n          frontmatter {\n            title: true\n          }\n        }\n      }\n    ]\n  })\n  return {\n    props: {\n      allMarkdown\n    },\n  }\n}\n\nexport default ({ allMarkdown }) =\u003e {\n  return (\n    \u003cul\u003e\n      {allMarkdown.nodes.map((post) =\u003e {\n        return (\n          \u003cli key={post.id}\u003e\n            \u003cLink href={`/post/${post.slug}`}\u003e{post.title}\u003c/Link\u003e\n          \u003c/li\u003e\n        )\n      })}\n    \u003c/ul\u003e\n  )\n}\n```\n\nThe `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.\n\n### Execute Raw Query\n\nIf you prefer GraphQL SDL over the JavaScript client, you can execute raw query too:\n\n```js\nimport { executeQuery, gql } from './path/to/mordred/graphql'\n\nconst { data, errors } = await executeQuery(\n  gql`\n    query($limit: Int!) {\n      allMarkdown(limit: $limit) {\n        id\n      }\n    }\n  `,\n  {\n    limit: 20,\n  },\n)\n```\n\nNote that we use the `gql` tag here only for syntax highlighting in supported editors like VS Code, it's completely optional.\n\n### Module Alias\n\nWhen your project has a deep nested folder structure, you might run into _import hell_:\n\n```js\nimport { client } from '../../mordred/graphql'\n```\n\nTo simplify the import path, you can use `paths` option in `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"mordred-graphql\": [\"./mordred/graphql\"]\n    }\n  }\n}\n```\n\nNow you can import form `mordred-graphql` instead.\n\nNote 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.\n\n### Exploring Data with GraphiQL\n\nYou can create an API at `/api/graphql` to explore data via GraphiQL:\n\n```js\nimport express from 'express'\nimport graphqlHTTP from 'express-graphql'\nimport { schema } from '../../mordred/graphql'\n\nconst app = express()\n\napp.use(\n  graphqlHTTP({\n    schema,\n    graphiql: true,\n  }),\n)\n\nexport default app\n```\n\n## Plugin List\n\n- [mordred-source-filesystem](/packages/mordred-source-filesystem)\n- [mordred-transformer-markdown](/packages/mordred-transformer-markdown)\n\n## License\n\nMIT \u0026copy; [EGOIST (Kevin Titor)](https://github.com/sponsors/egoist)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fmordred","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Fmordred","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fmordred/lists"}