mordred

? Morded

Datos de origen desde cualquier lugar, para next.js, nuxt.js, altamentos y muchos más.

Características

✅ Inspirado en Gatsby, puede consultar cualquier datos (Markdown, API, Base de datos, CMS) con GraphQL
✅ Genere automáticamente el cliente JavaScript para una mejor experiencia de desarrollo
✅ Marco Agnóstico, funciona con cualquier marco que tenga soporte SSG
✅ Toneladas de complementos para CMS populares sin cabeza (¡todavía no, necesitamos su contribución!)

Tabla de contenido

• Instalar
• Uso con Next.js
  • Configuración
  • Uso de datos
  • Ejecutar consultas sin procesar
  • Alias de módulo
  • Explorando datos con Graphiql
• Lista de complementos
• Licencia

Instalar

yarn add mordred

Uso con Next.js

Configuración

En next.config.js :

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

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

Luego cree un mordred.config.js en el mismo directorio y use algunos complementos:

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

También debe instalar estos complementos:

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

Uso de datos

Cree un archivo de Markdown en la carpeta content (en la raíz de su proyecto), como content/my-first-posts.md :

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

This is my ** first ** post!

Cuando ejecute next o next build , Mordred generará un cliente GraphQL en mordred/graphql.js , luego puede usar el cliente generado para consultar datos.

Debe agregar esta carpeta a .gitignore :

 mordred/

Ahora en cualquier página, los datos de consulta en 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 sintaxis client.query es muy similar a GraphQL SDL, excepto que también proporciona sugerencias de tipo a medida que escribe, usamos GraphQL-Zeus para generar el código del cliente.

Ejecutar consultas sin procesar

Si prefiere GraphQL SDL sobre el cliente JavaScript, también puede ejecutar la consulta sin procesar:

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

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

Tenga en cuenta que usamos la etiqueta gql aquí solo para resaltar sintaxis en editores compatibles como VS Code, es completamente opcional.

Alias de módulo

Cuando su proyecto tiene una estructura de carpeta anidada profunda, puede encontrarse con Import Hell :

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

Para simplificar la ruta de importación, puede usar la opción paths en tsconfig.json :

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

Ahora puede importar el formulario mordred-graphql .

Tenga en cuenta que Next.js admite paths de forma predeterminada, pero si está utilizando otras herramientas que no admiten esto, puede encontrar útil alias-HQ.

Explorando datos con Graphiql

Puede crear una API AT /api/graphql para explorar datos a través de 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 

Lista de complementos

• sistema de archivos de origen morded
• Markdown de Mordred-Transformer

Licencia

MIT © egoist (Kevin Titor)