mordred

؟ موردريد

بيانات المصدر من أي مكان ، لـ Next.js ، nuxt.js ، مرور وعدد الكثير.

سمات

✅ مستوحى من Gatsby ، يمكنك الاستعلام عن أي بيانات (Markdown ، API ، قاعدة البيانات ، CMS) مع GraphQL
✅ إنشاء عميل JavaScript تلقائيًا لتجربة DEV أفضل
✅ إطار عمل لاأدري ، يعمل مع أي إطار لديه دعم 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 build next أو Next ، ستقوم 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 Syntax إلى حد كبير GraphQL SDL باستثناء أنه يوفر أيضًا تلميحات من النوع أثناء الكتابة ، نستخدم GraphQl-Zeus لإنشاء رمز العميل.

تنفيذ الاستعلام الخام

إذا كنت تفضل GraphQL SDL على عميل JavaScript ، فيمكنك تنفيذ استعلام RAW أيضًا:

 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 افتراضيًا ، ولكن إذا كنت تستخدم أدوات أخرى لا تدعم هذا ، فقد تجد الاسم المستعار 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-SOURCESYSTYSTY
• Mordred-transformer-markdown

رخصة

MIT © EGOIST (Kevin Titor)