mordred

? Mordred

Sumber data dari mana saja, untuk next.js, nuxt.js, sebelas dan banyak lagi.

Fitur

✅ Terinspirasi oleh Gatsby, Anda dapat meminta data apa pun (Markdown, API, Database, CMS) dengan GraphQL
✅ Secara otomatis menghasilkan klien javascript untuk pengalaman dev yang lebih baik
✅ Kerangka kerja agnostik, bekerja dengan kerangka kerja apa pun yang memiliki dukungan SSG
✅ Ton plugin untuk CMS tanpa kepala populer (belum, kami membutuhkan kontribusi Anda!)

Daftar isi

• Memasang
• Penggunaan dengan next.js
  • Konfigurasi
  • Menggunakan data
  • Jalankan kueri mentah
  • Alias Modul
  • Menjelajahi Data dengan GraphiQL
• Daftar Plugin
• Lisensi

Memasang

yarn add mordred

Penggunaan dengan next.js

Konfigurasi

Di next.config.js :

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

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

Kemudian buat mordred.config.js di direktori yang sama dan gunakan beberapa plugin:

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

Anda juga perlu menginstal plugin ini:

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

Menggunakan data

Buat file markdown di folder content (di root proyek Anda), seperti content/my-first-posts.md :

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

This is my ** first ** post!

Saat Anda menjalankan next build next atau berikutnya, Mordred akan menghasilkan klien GraphQL di mordred/graphql.js , maka Anda dapat menggunakan klien yang dihasilkan untuk meminta data.

Anda harus menambahkan folder ini ke .gitignore :

 mordred/

Sekarang di halaman apa pun, data kueri di 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 >
  )
}

Sintaks client.query sangat mirip dengan GraphQL SDL kecuali bahwa itu juga memberikan petunjuk tipe saat Anda menulis, kami menggunakan GraphQL-Zeus untuk menghasilkan kode klien.

Jalankan kueri mentah

Jika Anda lebih suka graphql SDL daripada klien JavaScript, Anda juga dapat menjalankan kueri mentah:

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

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

Perhatikan bahwa kami menggunakan tag gql di sini hanya untuk penyorotan sintaks pada editor yang didukung seperti VS Code, itu sepenuhnya opsional.

Alias Modul

Ketika proyek Anda memiliki struktur folder bersarang yang dalam, Anda mungkin mengalami neraka impor :

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

Untuk menyederhanakan jalur impor, Anda dapat menggunakan opsi paths di tsconfig.json :

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

Sekarang Anda dapat mengimpor bentuk mordred-graphql sebagai gantinya.

Perhatikan bahwa Next.js mendukung paths secara default, tetapi jika Anda menggunakan alat lain yang tidak mendukung ini, Anda mungkin menganggap alias-HQ bermanfaat.

Menjelajahi Data dengan GraphiQL

Anda dapat membuat API AT /api/graphql untuk mengeksplorasi data melalui 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 

Daftar Plugin

• Sumber-Sumber Mordred
• Markred-Transformer-Markdown

Lisensi

MIT © Egoist (Kevin Titor)