Graphmsと次の接続.CMSパート3を見つける

この3番目のパートでは、私たちは私の研究を行っている間に見つけた別のヘッドレスのCMSを見てみます
私は次のコンテンツの探検をしたとき、私は意図的に彼らのGraphSQL APIを使用しなかった.
Graphmsは、私がcontentfulのものを使わなかった理由の1つです.
初心者にとって、GrapcicsのAPIは、それが最初にGraphqlを念頭に置いて構築されていることを考えれば、contentfulのものに優れています.
第二に、Graphmsは、わずか数回のクリックで使用するクエリを構築することによって支援します.

何がGraphmsですか？

私はGraphmsの賛美歌を歌っているが、それは何ですか?
Graphmsは、あなたが即座に様々なプラットフォームに配信することができますGraphSQLのコンテンツAPIを構築することができますAPIの最初のヘッドレスのCMSです.また、作成するAPIを操作するためのいくつかのオプションを提供します.
これが彼らの言うことです.

Graphmsは、作成し、豊かにし、統一し、プラットフォーム間でコンテンツを提供するインスタントGraphSQLコンテンツAPIを提供します。

• Build your production-ready Content API within minutes
• Remote data fetching to federate content from external sources
• Leading GraphQL APIs for Querying, Mutations, and Assets

MORE HOUSEKEEPING

Again, this is a proof of concept article. I am not explaining every single thing - this is also not a beginner walkthrough. I will gladly explain further if you ask me to.

Also, I did not show screenshots of the pulled data rendered in the Next app, you have already seen those. There is no point in showing them again. This article if you want to see them Sanity and NextJS

ちょうど前に、我々は最初にGraphmsで準備万端になるつもりです.

セットアップグラフ

〜についていきましょうGraphCMS アカウントを作成します.または1つを持っている場合にログインします.
その後、空白のプロジェクトを作成します

GraphCMS has a Blog project example but we are going to go through each step ourselves.

プロジェクトに名前を付け、使用するサーバーを選択し、「プロジェクトを作成」をクリックします.

次のページでは、無料プランを選択します

その後、メンバーを招待するよう求められます.後でどこにあるかあなたにお教えしましょう.
それから、彼らが我々がすると示唆する若干のもので、我々は我々のプロジェクト家に連れて行かれます.手順に従います.

The left bar is how you navigate around your project.

スキーマ作成

我々は、我々が2009年にしたように著者とポストスキーマを作りますContentful and NextJS: Finding A CMS Part 2
いずれかの“スキーマを設定”またはバーのスキーマアイコンを選択します.

My screen might look a little bit different from yours, but that's okay.

Createモデルを選択して、それを著者と呼びます.次に、これらのフィールドをそのモデルに追加します.

次に、これらのフィールドを使用してPostモデルを作成します.

ノート

それが自動的にタイトルから生成されるスラグフィールドを変更します.

ポストに必要な最後の分野は著者モデルへのリファレンスです

コンテンツの作成

今、我々はコンテンツのセクションに切り替える-著者を作成し、投稿のカップル

探検API

楽しい部分のために.API Playgroundセクションに切り替えます.ここで、我々は我々の質問を構築して、突然変異(変化または追加)を我々がするAPIに走らせることができます.

あなたは自分自身をクエリを構築するために選択するか、または我々のケースでは、我々は我々のポストデータを取得するエクスプローラを使用します.

我々は左のバーで我々の質問を保存することができます

I advise you to spend some time in the playground and figure out what kind of queries and mutations you can make.

シングルPOSTクエリ

ここでは、単一のポストについてのクエリも作成しましょう.

GraphSQLの簡単な説明

To get the post with the slug that matches, we pass the where parameter with the value we want to match.

To be able to use the query in our code, we then use GraphQL variables $slug

query getSinglePost($slug: String!) : この行では、クエリを作成し、変数$slug 活字String そして、それは必要です

post(where: { slug: $slug }) : そして、このラインでは、スラグが私たちがそれに渡したスラグ変数に等しいポストを再実行したいと我々は指定します

Victoria Lo 全体を持っているseries dedicated to GraphQL チェックアウトできます
または使用this link GraphSQLの詳細については

キーを生成する

我々の他のショーケースと同様に、我々は次の我々のGraphms Project FTOに接続するキーを必要とします.js
プロジェクト設定セクションに切り替え、それからAPIアクセス

必要なのはコンテンツAPIです.それをコピーしてテキストファイルに保存します.
次にページをスクロールし、「はい、デフォルトの初期化」オプションを選択します

そうすれば我々は次へ進むことができる.js

セットアップは次。js

前回と同じように、スターターが必要です.クローン:

git clone https://github.com/Psypher1/next-cms-starter.git

移動し、依存関係をインストールします.

cd next-cms-starter

npm install

追加依存

GraphSQLで動作する必要がある余分な依存関係のカップルがあり、リッチテキストをレンダリングします.インストールしましょう.
GraphSQLで動作する

npm i graphhql graphql-request

リッチテキストをレンダリングするには、次の手順に従います

npm i @graphcms/rich-text-react-renderer

セットアップ

我々のenv原料を邪魔しましょう.
プロジェクトのルートで、.env , ペーストした内容キーをペーストします.

 GRAPHCMS_ENDPOINT=

それからrootでもフォルダを作りますservices そしてその中にindex.js .
ここで問い合わせを保存します

// ...services/index.js
import { GraphQLClient, gql } from "graphql-request";

const graphcms = new GraphQLClient(process.env.GRAPHCMS_ENDPOINT);

すべての投稿のクエリ.

export async function getAllPost() {
  const query = gql`
    {
      postsConnection {
        edges {
          node {
            id
            title
            slug
            excerpt
            createdAt
            image {
              url
            }
            author {
              name
              photo {
                url
              }
            }
            body {
              raw
            }
          }
        }
      }
    }
  `;

  const results = await graphcms.request(query);
  return results.postsConnection.edges;
}

シングルPOSTクエリ

export async function getSinglePost(slug) {
  const query = gql`
    query getSinglePost($slug: String!) {
      post(where: { slug: $slug }) {
        id
        title
        slug
        excerpt
        createdAt
        image {
          url
        }
        author {
          name
          photo {
            url
          }
        }
        body {
          raw
        }
      }
    }
  `;

  const results = await graphcms.request(query, { slug });
  return results.post;
}

NOTE: raw is deprecated now. So when you make the fetch for rich text, use json instead.

ブログホームにロードポスト

さあ移動しましょう..pages/blog/index.js そして、そこの我々のポストのリストを提出しましょう
最初のインポートクエリ

// ...pages/blog/index.js

import { getAllPosts } from "../../services";

//  fetch  our posts
export async function getStaticProps() {
  const posts = (await getAllPosts()) || [];

  return {
    props: { posts },
  };
}

使用するgetStaticPros 我々のポストを取って、それから小道具を返して、我々のコンポーネントにそれらを渡すために
投稿一覧を表示する

//  ...pages/blog/index.js

export default function Blog({posts}){

    return {
        <div>
            {posts && posts.map(post =>(
                <div key={post.id}>
                    <Link href={`/blog/${post.node.slug}`}>
                        <a>{post.node.title}</a>
                    </LInk>
                    <img src={post.node.image.url}>
                </div>
            ))}
        </div>
    }

詳細ページをレンダリング

我々は今詳細ページに移動することができます.開きましょう...pages/blog/[slug].js そして、このコードを
インストールした機能と追加のパッケージをインポートしましょう.

// pages/blog/[slug].js 

import { getAllPosts, getSinglePost } from "../../services";
import { RichText } from "@graphcms/rich-text-react-renderer";

次の詳細ページをレンダリングします.JSには2つの機能が必要です.

// we use this function to tell Nextjs how many paths to pre render
export async function getStaticPaths() {
  const posts = (await getAllPosts()) || [];

   //map through the post slugs and return them as params
  const paths = posts.map(({ node: { slug } }) => ({ params: { slug } }));

  return {
    paths,
    fallback: false,
  };
}

// this function is rsponsible for fetching the individual post data
export async function getStaticProps({ params }) {
  const data = await getSinglePost(params.slug);

  return {
    props: { post: data },
  };
}

詳細ページを表示します

// load post data onto page
export default function PostDetail({ post }) {

    return(
      <div>
        <h2>{post.title}</h2>
        <img src={post.image.url} alt={post.title} />

        // author info
         <div>
            <p>{post.author.name}</p>
        </div>
        // post body
         <hr />
        <div >
            {/* use the package to render post body*/}
             <RichText content={post.body.raw.children} />
        </div>

        // useful links
        <hr />
        <br />
        <div >
           <Link href="/blog">
                 <a> {"<Back to Blog"}</a>
           </Link>
           <Link href="/">
             <a > {"<Home"}</a>
          </Link>
       </div>
    </div>
    )
}

そこに行く!我々はスキーマとコンテンツを作成し、クエリを私たちのコンテンツを取得することができました.これらのクエリを使用してデータをレンダリングしました.リストと詳細形式の両方のJSサイト.

その他のGrapcms機能

プロジェクトメンバーにプロジェクトメンバーを追加するには、プロジェクトのホームでプロジェクトの設定に移動し、チームメンバーを選択します

我々がモデルをつくっていたとき、そこに他のものがありました.

コンポーネント

列挙

リモートソース

コンポーネント

コンポーネントはGraphmsに新しいです.チームに彼らについて話しましょう

Breeze through content creation with components! Move away from rigid content structures to start experiencing cleaner schemas, flexible content models, and intuitive content operations with reusable content templates.

列挙

これらはコンテンツモデルで使用する項目のリストです.それは私がそれらを理解する方法です

リモートソース

これは、我々がまだテストしているという特徴です.本質的に、あなたはあなたのGraphmsプロジェクトの他のソースからデータを使用することができます(私はそれについてより詳細な記事を書いています).

得点

それで、Graphmsはどうしましたか?見つけましょう.

使いやすさ

私に
Graphmsは私にとって簡単です.私は、私自身が将来より多くを使っているのを見ます.
利用者
ユーザーにコンテンツを追加するよう頼んだとき、少しの摩擦があったが、少し説明の後、彼らは非常によく得ることができました.

2 .どのようによくデータを問い合わせることができるか

私が今までテストしたヘッドレスCMSのうち、Graphmsはデータの問い合わせで最も効率的です.それはあなたのクエリを構築するためのシームレスなアプローチを持っているという事実のために.

次への統合の容易さ

私は、私の次でよく遊ぶヘッドレスのCMSをテストする幸運を持ちました.js私はそれについてとても幸せです

生産に要する時間

全く時間がない、あなたが公開、それはライブです.

サポート/コミュニティ

Graphmsスラックは、すべての質問やクエリを移動する場所です.

展開の容易さ

配備は必要ありません.コンテンツを公開すると、消費される準備ができています.フロントエンドのあなたの選択は残っているものです.

結論

私はgraphcmsでの作業をお楽しみください.私は新しいポートフォリオサイトのバックエンドとして使っています.私は、私のデータへのより深いレベルのアクセスがあるのが好きです.

Thank you for coming along with me on this exploration. If you have any questions, please leave a comment. If you noticed a mistake kindly let me know.

読んでいただきありがとうございます、接続しましょう！

私のこの小さな隅を訪問していただきありがとうございます.つながりましょう.Polywork and