mordredダウンロードmordredソースコードのダウンロード

mordred

AI ソースコード

v0.2.1

ダウンロード

？ mordred

next.js、nuxt.js、さらに多くのどこからでも、どこからでもソースデータ。

特徴

GATSBYに触発されて、GRAPHQLでデータ（Markdown、API、Database、CMS）をクエリすることができます
devエクスペリエンスを向上させるために、JavaScriptクライアントを自動的に生成します
framework不可知論者は、SSGサポートを備えたフレームワークで動作します
人気のあるヘッドレス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フォルダー（プロジェクトルート）にマークダウンファイルを作成します。

 ---
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構文は、書くときにタイプヒントを提供することを除いて、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 { client } from '../../mordred/graphql'

インポートパスを簡素化するには、 tsconfig.jsonでpathsオプションを使用できます。

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

これで、代わりにform 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