mordred

? Mordred

Quellendaten von überall, für Next.js, nuxt.js, elf und viele mehr.

Merkmale

✅ Inspiriert von Gatsby können Sie alle Daten (Markierung, API, Datenbank, CMS) mit GraphQL abfragen
✅ Generieren Sie den JavaScript -Client automatisch für eine bessere Entwicklererfahrung
✅ Framework Agnostic, arbeitet mit jedem Rahmen, der SSG -Unterstützung bietet
✅ Tonnen von Plugins für beliebtes kopfloses CMS (noch brauchen wir Ihren Beitrag!)

Inhaltsverzeichnis

• Installieren
• Verwendung mit Next.js
  • Konfiguration
  • Daten verwenden
  • Rohabfrage ausführen
  • Modul -Alias
  • Erforschen von Daten mit GraphiQL
• Pluginliste
• Lizenz

Installieren

yarn add mordred

Verwendung mit Next.js

Konfiguration

In next.config.js :

 const { withMordred } = require ( 'mordred/next' )

module . exports = withMordred ( {
  // Extra Next.js config..
} )

Erstellen Sie dann im selben Verzeichnis eine mordred.config.js und verwenden Sie einige Plugins:

 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' ,
    } ,
  ] ,
}

Sie müssen auch diese Plugins installieren:

yarn add mordred-source-filesystem mordred-transformer-markdown

Daten verwenden

Erstellen Sie eine Markdown-Datei im content (in Ihrem Projektroot), wie content/my-first-posts.md :

 ---
title : My First Post
date : 2020-04-24
---

This is my ** first ** post!

Wenn Sie next oder next build ausgeführt werden, generiert Mordred einen GraphQL -Client bei mordred/graphql.js . Sie können den generierten Client verwenden, um Daten abzufragen.

Sie sollten diesen Ordner zu .gitignore hinzufügen:

 mordred/

Fragen Sie nun auf jeder Seite Daten in getStaticProps ab:

 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 (
    < ul >
      { allMarkdown . nodes . map ( ( post ) => {
        return (
          < li key = { post . id } >
            < Link href = { `/post/ ${ post . slug } ` } > { post . title } </ Link >
          </ li >
        )
      } ) }
    </ ul >
  )
}

Die client.query Syntax ist dem GraphQL SDL sehr ähnlich, außer dass sie auch Typ-Hinweise liefert, während Sie schreiben. Wir verwenden GraphQL-Zeus, um den Client-Code zu generieren.

Rohabfrage ausführen

Wenn Sie GraphQL SDL gegenüber dem JavaScript -Client bevorzugen, können Sie auch eine RAW -Abfrage ausführen:

 import { executeQuery , gql } from './path/to/mordred/graphql'

const { data , errors } = await executeQuery (
  gql `
    query($limit: Int!) {
      allMarkdown(limit: $limit) {
        id
      }
    }
  ` ,
  {
    limit : 20 ,
  } ,
)

Beachten Sie, dass wir das gql -Tag hier nur für die Syntax -Hervorhebung in unterstützten Editoren wie VS -Code verwenden. Es ist vollständig optional.

Modul -Alias

Wenn Ihr Projekt über eine tiefe verschachtelte Ordnerstruktur verfügt, können Sie die Hölle importieren :

 import { client } from '../../mordred/graphql'

Um den Importpfad zu vereinfachen, können Sie paths in tsconfig.json verwenden:

{
  "compilerOptions" : {
    "baseUrl" : " . " ,
    "paths" : {
      "mordred-graphql" : [ " ./mordred/graphql " ]
    }
  }
}

Jetzt können Sie stattdessen Form mordred-graphql importieren.

Beachten Sie, dass Next.js standardmäßig paths unterstützt. Wenn Sie jedoch andere Tools verwenden, die dies nicht unterstützen, finden Sie möglicherweise Alias-HQ hilfreich.

Erforschen von Daten mit GraphiQL

Sie können eine API AT /api/graphql erstellen, um Daten über GraphiQL zu untersuchen:

 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 

Pluginliste

• Mordred-Source-Filesystem
• Mordred-Transformator-Markdown

Lizenz

Mit © Egoist (Kevin Titor)