mordred

? Mordred

Dados de origem de qualquer lugar, para Next.js, Nuxt.js, Eleventy e muito mais.

Características

✅ Inspirado por Gatsby, você pode consultar quaisquer dados (Markdown, API, Banco de Dados, CMS) com GraphQL
✅ Gere automaticamente o cliente JavaScript para melhor experiência de desenvolvimento
✅ Estrutura AGNOSTIC, trabalha com qualquer estrutura que tenha suporte SSG
✅ Toneladas de plugins para CMS populares sem cabeça (ainda não, precisamos da sua contribuição!)

Índice

• Instalar
• Uso com Next.js
  • Configuração
  • Usando dados
  • Execute a consulta bruta
  • Alias do módulo
  • Explorando dados com grafiql
• Lista de plugins
• Licença

Instalar

yarn add mordred

Uso com Next.js

Configuração

Em next.config.js :

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

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

Em seguida, crie um mordred.config.js no mesmo diretório e use alguns 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' ,
    } ,
  ] ,
}

Você também precisa instalar estes plugins:

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

Usando dados

Crie um arquivo de marcação na pasta de content (na raiz do seu projeto), como content/my-first-posts.md :

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

This is my ** first ** post!

Quando você executa next ou next build , o Mordred gera um cliente GraphQL no mordred/graphql.js , então você pode usar o cliente gerado para consultar dados.

Você deve adicionar esta pasta ao .gitignore :

 mordred/

Agora, em qualquer página, consulta dados no 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 >
  )
}

A sintaxe client.query é muito semelhante ao GraphQL SDL, exceto que também fornece dicas de tipo à medida que você escreve, usamos grafql-zel para gerar o código do cliente.

Execute a consulta bruta

Se você preferir o GraphQL SDL sobre o cliente JavaScript, também poderá executar a consulta bruta:

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

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

Observe que usamos a tag gql aqui apenas para destaque da sintaxe em editores suportados como o código VS, é completamente opcional.

Alias do módulo

Quando seu projeto tem uma estrutura profunda de pastas aninhadas, você pode encontrar o inferno de importação :

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

Para simplificar o caminho de importação, você pode usar a opção paths em tsconfig.json :

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

Agora você pode importar o formulário mordred-graphql .

Observe que o Next.js suporta paths por padrão, mas se você estiver usando outras ferramentas que não suportam isso, poderá encontrar um alias-hq útil.

Explorando dados com grafiql

Você pode criar uma API em /api/graphql para explorar dados 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 

Lista de plugins

• Mordred-Source-Filesystem
• Mordred-Transformer-Markdown

Licença

MIT © Egoist (Kevin Titor)