GatsbyJS の外部コンテンツ-jsチュートリアル-php.cn

External content for GatsbyJS

外部コンテンツを含む静的 Web サイトを構築しましょう。
この投稿では、GatsbyJS を使用して任意のデータソースからのデータを静的にレンダリングする方法を説明します。

ギャツビーJS

React が好きで、標準に準拠した高パフォーマンスの Web が必要な場合は、GatsbyJS を検討してください。

それは何をしますか?

React コードを静的 HTML ファイルのコレクションにコンパイルします。

なぜ気にする必要があるのでしょうか?

最大のパフォーマンス - ユーザーが Web を閲覧するときに、クライアント側またはサーバー側でコードが実行されることはありません!
最速の画像 - ユーザーのデバイスに適切な解像度で画像をプログレッシブに読み込みます。
SEO - 静的 HTML は Google (ロボット) に優しいです。遅いウェブサイトは Google 検索によってペナルティを受けます!
React - 生産的なフロントエンド開発。
Typescript - ユーザーが目にする前にエラーをキャッチします (オプションですが、強くお勧めします)!
コンテンツ - すぐに使用できる多くのコンテンツソースを接続して使用するか、独自のコンテンツソースを追加します!

ギャツビー JS コンテンツ

GatsbyJS はコンテンツをノードのツリーとして表します。ノードは画像やテキストのブロックにすることができます。
たとえば、ブログ投稿はテキストと画像のノードのコレクションです。

gatsby-node.js ファイルでノードを手動で作成できます。しかし、もっと簡単な方法があります。

プラグイン

ノードはプラグインによって作成されます。どのプラグインが必要かは、選択した CMS によって異なります。
最も簡単なオプションは、ファイルをノードに変換するファイルシステムプラグインです。
自分に合ったプラグインを見つけるには、ここをご覧ください

プラグインが見つかりません

既存のプラグインでカバーされていないデータソースがある場合は、独自のプラグインを構築しましょう。

このプロセスは非常に単純で、複雑な部分は画像のみです。

ノードのロード中

gatsby プロジェクトのルートフォルダーに gatsby-node.ts (または js) ファイルを作成します。

開始するには、このコードを追加してください。 sourceNodes メソッドは、gatsby プロジェクトのビルド時に自動的に呼び出されます。

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

ログイン後にコピー

それでは、データを取得しましょう。ここでは https://inuko.net アプリプラットフォームを使用しますが、プロセスはどのソースでも同様です。

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

ログイン後にコピー

そして、必要な画像も取得しましょう。

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

ログイン後にコピー

これで、(ブログ) 投稿のリストと画像 (リンク) のリストができました。
この例では、各投稿にテキストコンテンツと 1 つの画像の ID が含まれる単純な構造があります。

次のステップは、サーバーから取得したデータを gatsby が使用できるデータに変換することです。
gatsby のデータは *node*s で表されるので、サーバーデータをノードに変換する方法を見てみましょう。

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

ログイン後にコピー

すべての投稿を反復処理し、それぞれに対応するノードを作成します。
投稿に画像 post.image_id がある場合は、remoteFileNode ノードと
も作成します。それをポストノードに追加します
post.mediaFile___NODE = fileNode.id

重要注: gatsby はファイルノードからイメージノードを自動的に作成しますが、それがイメージであることを検出する方法が必要です。
URL にファイル拡張子が含まれている場合、またはサーバーが画像コンテンツタイプで応答する場合は、準備完了です。
そうでない場合は、ファイルノードに明示的な拡張子 (png、jpg) を設定して、イメージノードの作成をトリガーできます。
拡張子: name.substring(name.lastIndexOf("."))

画像ノード

おそらく、なぜ画像をノードとしてロードするという苦労をするのか不思議に思っているかもしれません。画像の URL を直接使用することもできます。
たとえば、画像が認証されたサービスの背後にある場合もあります。
しかし本当の理由は、gatsby が提供する素晴らしい画像プラグインを使いたいからです。
画像は、Web を閲覧するあらゆるデバイスに最適な形式とサイズに自動的に変換されます。
これは、画像の読み込みが速くなり、見た目も良くなることを意味します (Google によるスコアが向上します)。

ページ内のノードの消費

作成したノードを使用する準備が整いました。
これを行うにはさまざまな方法があります。この例では、いくつかの投稿を機能ページにレンダリングします。

まず、対象となるデータノードをロードする必要があります。useStaticQuery を使用します。
次に、読み込まれたすべての投稿をレンダリングする SectionGrid という再利用可能なコンポーネントにデータを渡します。

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return <SectionGrid data={data} title={<h1>Features</h1>} />
}

ログイン後にコピー

レンダリング時間です!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return <div className="sectionGrid">
        <div className="hero">
            {props.title}
        </div>
        {edges.map(edge => {
            const node = edge.node;
            return <div className="section">
                <div>
                    <GatsbyImage image={node.mediaFile.childImageSharp.gatsbyImageData} alt={edge.name} />
                </div>
                <div className="sectionText">
                    <h2>{node.title}</h2>
                    <div>{node.content}</div>
                </div>
            </div>
        })}
    </div>
}

ログイン後にコピー

このコンポーネントは、クエリから取得したすべてのノードを反復処理します。そして、2 つの div をレンダリングします。1 つは投稿画像用、もう 1 つはテキストコンテンツ用です。