mordred 다운로드 mordred 소스 코드 다운로드

mordred

AI 소스 코드

v0.2.1

다운로드

? Mordred

Next.js, nuxt.js, eleventy 및 더 많은 곳에서 어디서나 소스 데이터.

특징

graphQL을 사용하여 모든 데이터 (Markdown, API, Database, CMS)를 쿼리 할 수 있습니다.
더 나은 개발 경험을 위해 JavaScript 클라이언트를 자동으로 생성합니다
framework Framework Agnostic, SSG 지원이있는 프레임 워크와 함께 작동합니다.
popular 인기있는 헤드리스 CMS 용 플러그인 톤입니다 (아직, 우리는 당신의 기여가 필요합니다!)

설치하다

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

데이터 사용

content/my-first-posts.md 와 같은 content Folder (프로젝트 루트에서)에서 Markdown 파일을 만듭니다.

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

This is my ** first ** post!

next 빌드 또는 next build 실행하면 Mordred는 mordred/graphql.js 에서 GraphQL 클라이언트를 생성 한 다음 생성 된 클라이언트를 사용하여 데이터를 쿼리 할 수 있습니다.

이 폴더를 .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를 사용하여 클라이언트 코드를 생성합니다.

원시 쿼리를 실행하십시오

JavaScript 클라이언트보다 GraphQL SDL을 선호하는 경우 RAW 쿼리도 실행할 수 있습니다.

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

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

VS 코드와 같은 지원되는 편집자의 구문 강조 표시에 대해서만 gql 태그를 사용합니다. 완전히 선택 사항입니다.

모듈 별칭

프로젝트에 깊은 중첩 폴더 구조가 있으면 import hell 에 들어갈 수 있습니다.

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

가져 오기 경로를 단순화하려면 tsconfig.json 에서 paths 옵션을 사용할 수 있습니다.

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

이제 대신 mordred-graphql 양식을 가져올 수 있습니다.

Next.js는 기본적으로 paths 지원하지만이를 지원하지 않는 다른 도구를 사용하는 경우 별명이 도움이 될 수 있습니다.

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