mordred

? Mordré

Données source de n'importe où, pour Next.js, nuxt.js, Eleventy et bien d'autres.

Caractéristiques

✅ Inspiré par Gatsby, vous pouvez interroger toutes les données (Markdown, API, base de données, CMS) avec GraphQL
✅ Générez automatiquement le client JavaScript pour une meilleure expérience de développement
✅ Framework Agnostic, fonctionne avec n'importe quel cadre qui a un support SSG
✅ tonnes de plugins pour CMS sans tête populaire (pas encore, nous avons besoin de votre contribution!)

Table des matières

• Installer
• Usage avec next.js
  • Configuration
  • Utilisation de données
  • Exécuter la requête brute
  • Alias module
  • Exploration des données avec Graphiql
• Liste des plugins
• Licence

Installer

yarn add mordred

Usage avec next.js

Configuration

Dans next.config.js :

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

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

Créez ensuite un mordred.config.js dans le même répertoire et utilisez des 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' ,
    } ,
  ] ,
}

Vous devez également installer ces plugins:

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

Utilisation de données

Créez un fichier Markdown dans le dossier content (dans la racine de votre projet), comme content/my-first-posts.md :

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

This is my ** first ** post!

Lorsque vous exécutez la version next ou next build , Mordred générera un client GraphQL chez mordred/graphql.js , vous pouvez utiliser le client généré pour interroger les données.

Vous devez ajouter ce dossier à .gitignore :

 mordred/

Maintenant, dans n'importe quelle page, interrogez les données dans getStaticProps :

 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 >
  )
}

La syntaxe client.query est très similaire à GraphQL SDL, sauf qu'il fournit également des astuces de type à mesure que vous écrivez, nous utilisons GraphQL-Zeus pour générer le code client.

Exécuter la requête brute

Si vous préférez GraphQL SDL au client JavaScript, vous pouvez également exécuter Raw Query:

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

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

Notez que nous utilisons la balise gql ici uniquement pour la mise en évidence de la syntaxe dans les éditeurs pris en charge comme le code vs, il est complètement facultatif.

Alias module

Lorsque votre projet a une structure de dossiers imbriqués profondément, vous pourriez rencontrer un enfer d'importation :

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

Pour simplifier le chemin d'importation, vous pouvez utiliser l'option paths dans tsconfig.json :

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

Vous pouvez maintenant importer le formulaire mordred-graphql à la place.

Notez que Next.js prend en charge paths par défaut, mais si vous utilisez d'autres outils qui ne prennent pas en charge cela, vous pouvez trouver Alias-HQ utile.

Exploration des données avec Graphiql

Vous pouvez créer une API à /api/graphql pour explorer les données 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 app 

Liste des plugins

• système de fichier mordré
• mordred-transformateur-markdown

Licence

MIT © Egoist (Kevin Titor)