mordred

- เมีย

แหล่งข้อมูลจากทุกที่สำหรับ next.js, nuxt.js, eliesthing และอื่น ๆ อีกมากมาย

คุณสมบัติ

✅แรงบันดาลใจจาก Gatsby คุณสามารถสอบถามข้อมูลใด ๆ (Markdown, API, ฐานข้อมูล, CMS) ด้วย graphQl
✅สร้างไคลเอนต์ JavaScript โดยอัตโนมัติเพื่อประสบการณ์การพัฒนาที่ดีขึ้น
framework Agnostic ทำงานกับกรอบใด ๆ ที่ได้รับการสนับสนุน SSG
✅ปลั๊กอินตันสำหรับ CMS ที่เป็นที่นิยม (ยังไม่ต้องการเงินสมทบของคุณ!)

สารบัญ

• ติดตั้ง
• การใช้งานกับ next.js
  • การกำหนดค่า
  • ใช้ข้อมูล
  • ดำเนินการค้นหาดิบ
  • นามแฝงโมดูล
  • การสำรวจข้อมูลด้วย graphiql
• รายการปลั๊กอิน
• ใบอนุญาต

ติดตั้ง

yarn add mordred

การใช้งานกับ next.js

การกำหนดค่า

ใน next.config.js :

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

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

จากนั้นสร้าง mordred.config.js ในไดเรกทอรีเดียวกันและใช้ปลั๊กอินบางอย่าง:

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

คุณต้องติดตั้งปลั๊กอินเหล่านี้ด้วย:

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

ใช้ข้อมูล

สร้างไฟล์ markdown ในโฟลเดอร์ content (ในรูทโครงการของคุณ) เช่น content/my-first-posts.md :

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

This is my ** first ** post!

เมื่อคุณเรียกใช้งาน next หรือ next build Mordred จะสร้างไคลเอนต์ GraphQL ที่ mordred/graphql.js จากนั้นคุณสามารถใช้ไคลเอนต์ที่สร้างขึ้นเพื่อสอบถามข้อมูล

คุณควรเพิ่มโฟลเดอร์นี้เป็น .gitignore :

 mordred/

ตอนนี้ในหน้าใด ๆ ข้อมูลการสืบค้นใน 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 >
  )
}

client.query ต์ไวยากรณ์ QUARTY นั้นคล้ายคลึงกับ GraphQL SDL ยกเว้นว่ามันยังให้คำแนะนำประเภทในขณะที่คุณเขียนเราใช้ GraphQl-Zeus เพื่อสร้างรหัสไคลเอนต์

ดำเนินการค้นหาดิบ

หากคุณต้องการ graphql sdl ผ่านไคลเอนต์ JavaScript คุณสามารถเรียกใช้การสืบค้นดิบได้เช่นกัน:

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

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

โปรดทราบว่าเราใช้แท็ก gql ที่นี่เฉพาะสำหรับการเน้นไวยากรณ์ในบรรณาธิการที่รองรับเช่น VS Code ซึ่งเป็นตัวเลือกที่สมบูรณ์

นามแฝงโมดูล

เมื่อโครงการของคุณมีโครงสร้างโฟลเดอร์ที่ซ้อนกันลึกคุณอาจพบว่ามี การนำเข้านรก :

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

ในการทำให้เส้นทางการนำเข้าง่ายขึ้นคุณสามารถใช้ตัวเลือก paths ใน tsconfig.json :

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

ตอนนี้คุณสามารถนำเข้าแบบฟอร์ม mordred-graphql แทน

โปรดทราบว่า next.js รองรับ paths ตามค่าเริ่มต้น แต่ถ้าคุณใช้เครื่องมืออื่น ๆ ที่ไม่รองรับสิ่งนี้คุณอาจพบว่า Alias-HQ มีประโยชน์

การสำรวจข้อมูลด้วย graphiql

คุณสามารถสร้าง API AT /api/graphql เพื่อสำรวจข้อมูลผ่าน 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 

รายการปลั๊กอิน

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

ใบอนุญาต

MIT © Egoist (Kevin Titor)