読み取り専用トークン-クエリ要求いつでも

読み取り専用トークンを使用すると、サーバー上またはクライアント上にあるかどうかをアプリケーション内の任意の時点でプロジェクトからデータを照会できます.読み取り専用トークンの前に、チーナはすべてgetStaticPropsまたはgetStaticPathsを通して行った.これは、ほとんどの場合、SSGでヘッドレスCMSを使用する場合、ほとんどの場合、処理されます.しかし、我々はtinacmsの1.0リリースに向けて我々は反応、リミックス、ギャツビーを含むより多くのフレームワークをサポートすることができますに移動します.

読み取り専用トークンの使用例

以下は読み取り専用トークンのいくつかのユースケースです

サーバ側レンダリング

クライアント側のフェッチ

実行時サーバロジック

どのように読み取り専用トークンを使用するには？

読み込み専用トークンを使用する前に、使用しているリポジトリにデータ層が有効になっていることを確認する必要があります.これは、読み取り専用トークンが動作するように必要です.

ダッシュボードからトークンを作成する

Tina Cloudに移動し、トークンを追加するプロジェクトをクリックし、「トークン」タブをクリックします

次に、「新しいトークン」をクリックし、必要なフィールドを埋めます.トークンの名前は、トークンを識別する方法であり、“git分岐”は、トークンがアクセスしたコンマで区切られた枝のリストです.

最後に、「トークンを作成」をクリックします.

要求の準備

この時点で、読み取り専用トークンを使用してリクエストを作成する準備ができました.私は別のユースケースのいくつかの例を一緒に入れている、彼らはチーナとほとんどのユースケースを満たす必要がありますフォールバックとSSR、CSR、SSGが含まれています.

SSR -サーバー側のレンダリングコンテンツ

ほとんどの場合、コンテンツは静的にビルド時に生成されますが、機会にあなたのチーナパワーアプリでSSRを使用する必要があります.それはチーナによって動かされないページでありえました、しかし、あなたはあなたの全アプリケーションに力を与えるために我々のGraphical層を使用しています.

const query = `
    getPostDocument(example.md) {
      data {
        title
        body
      }
  }
  `;

export async function getServerSideProps(context) {
    let data
    const res = await fetch(
      'https://content.tinajs.io/content/<CLIENT_ID>/github/<BRANCH>',
      {
        method: 'POST',
        body: JSON.stringify({ query, variables }),
        headers: {
          'X-API-KEY': 'API_KEY',
          'Content-Type': 'application/json',
        },
      }
    );
    const jsonData = await res.json();
    data = jsonData.data;
  return {
    props: {
        data,
        query,
        variables,                      
}, // will be passed to the page component as props
  }
}

ユーザーがこのページに戻るたびに、彼らはチーナからの最新のコンテンツで新しく提供されたページを受信します.

クライアント側レンダリング

クライアント側のレンダリングは、ページ上のコンテンツを維持するのに最適な方法、誰かがページを訪問するたびにすることができます.チーナのコンテンツは、取得またはaxiosなどのお好みのHTTPクライアントを使用して取得することができます.

import { useState, useEffect } from "react";
import { useTina } from "tinacms/dist/edit-state";
// This is a query you want.
const query = `
query ContentQuery($relativePath: String!) {
  get<CollectionName>Document(relativePath: $relativePath) {
    data {
      body
      title
    }
  }
}
`;

// Variables used in the GraphQL query;
const variables = {
  relativePath: "HelloWorld.md",
};

function BlogPostPage() {
  const [initalData, setData] = useState(null);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(
      "https://content.tinajs.io/content/<ClientId>/github/<Branch>",
      {
        method: "POST",
        body: JSON.stringify({ query, variables }),
        headers: {
          "X-API-KEY": "<ReadOnlyToken>",
          "Content-Type": "application/json",
        },
      }
    )
      .then((res) => res.json())
      .then((data) => {
        console.log({ data });
        setData(data);
        setLoading(false);
      })
      .catch((e) => {
        console.error(e);
      });
  }, [query, JSON.stringify(variables)]);

  const { data } = useTina({ query, variables, data: initalData });

  if (isLoading) return <p>Loading...</p>;
  if (!data) return <p>No data</p>;

  return <div>{JSON.stringify(data)}</div>;
}
export default BlogPostPage;

この例では、読み取り専用のトークンを使用してチーナからデータを取得するときに有効に使用します.あなたが見るURLは、選択のあなたのclientIdとGithub支店によって動かされます.次に、useTinaを使用してデータをUIを通して設定します.

フォールバック

今までほとんどのチーナユーザーは、チーナと新しいページを作成するためのfallback: blockingを使用します.
これには問題があります.

あなたはもはやデフォルト(404ページ)でフォールバックページを持っていません.

データ、データがないかページがないときに処理する方法が必要です.

読み取り専用トークンでは、これは多くの少ない開発者の摩擦とより良いユーザーエクスペリエンスを持って、我々は3つのパスにGetStaticsPropsコードを破ることができます.

データが返されます(これは以前のコードです)

データが返されず、読み込み専用トークンを使用して取得します.そこにあるならば、それを返してください.

データが返されず、読み取り専用トークンを使用してデータが返されず、フォールバックページが返されます.

import { staticRequest } from 'tinacms';

const query = `query getPost($relativePath: String!) {
    getPostDocument(relativePath: $relativePath) {
      data {
        title
        body
      }
    }
  }
  `;

export const getStaticProps = async (ctx) => {
  const variables = {
    relativePath: ctx.params.slug + ".md",
  };
  let data;
  let error;
  error = false;

  try {
    // use the local client at build time
    data = await staticRequest({
      query,
      variables,
    });
  } catch (error) {
    // swallow errors related to document creation
  }
  // if there isn't data set the error flag
  if (!data) {
    error = true;
  }
  if (error) {
    // use read-only tokens to get live data
    const res = await fetch(
      'https://content.tinajs.io/content/<CLIENT_ID>/github/<BRANCH>',
      {
        method: 'POST',
        body: JSON.stringify({ query, variables }),
        headers: {
          'X-API-KEY': 'API_KEY',
          'Content-Type': 'application/json',
        },
      }
    );
    const jsonData = await res.json();
    data = jsonData.data;
    // if there is no data set the notFound true (This returns 404
    if (!data) {
      return {
        notFound: true,
      };
    }
  }

  return {
    props: {
      data,
      query,
      variables,
    },
  };
};

上のコードは色々なことをしていますので、先に述べたセクションに分けてください.

データを生成する元の要求は、データ、クエリ、変数を返します.

データが返されない場合、エラーフラグをtrueに設定します.エラーフラグがtrueの場合、読み取り専用トークンを使用してデータを取得し、それをユーザーに表示するか、コンテンツエディターに返します.

データが返されず、読み取り専用トークンがデータを返さない場合、notFound: true(これはnext . jsの特別なフラグです)を返します.このフラグは、404エラーページとステータスコードの404を返します.

どのようにチーナと最新の状態に保つには？

チーナについていく最善の方法は、我々のニュースレターを購読することです.更新は、私たちは、あなたが逃している可能性がありますブログの記事、およびそんなに多くの作業をされている新機能が含まれています!
このリンクに従って購読し、Eメールを入力することができます

https://tina.io/community/ チーナコミュニティ

チーナは、Jamstack愛好家とチーナ愛好家でいっぱいのコミュニティ を持ちます.あなたが加わるとき、あなたは場所を見つけます:
の問題で援助を得る

は、最新のチーナニュースとスニークプレビュー

を見つけます

は、あなたのプロジェクトをチーナコミュニティと共有して、あなたの経験

について話します
Jamstack についての

チャット

チーナ

私たちのTwitterのアカウントは、最新の機能、改善を発表し、チーナにピークススニーク.あなたが構築したプロジェクトで私たちをタグ付けした場合、我々はまた、精神的になる.