GraphQL クエリ - フィルター

Keystone は、システム内のデータをクエリするための強力な GraphQL API を提供しています。この API の中心には、クエリフィルターがあります。このガイドでは、フィルターを使用して必要なデータを取得する方法を説明します。

関係性の理解

Keystone において、異なるコンテンツのリスト間で作成する接続を『関係性』と呼びます。構築するものは、必要に応じて大きく異なります。このガイドでは、構造化されたコンテンツを通じてプロジェクトに価値をもたらすために、Keystone における関係性を考え、構成する方法を説明します。

コマンドライン

Keystone のコマンドラインインターフェイス (CLI) は、Keystone プロジェクトを開発、ビルド、展開するために設計されています。
keystone コマンドを使用することで、開発プロセスを開始し、アプリケーションをビルドして本番環境で実行し、スキーマが変更されるにつれてデータベースの構造を移行する方法を制御できます。

ドキュメントフィールド

Keystone のドキュメントフィールドを使用して、強力でカスタマイズ可能なリッチテキスト編集体験を実装する方法を学びます。

認証とセッション

auth.ts

import { createAuth } from '@keystone-6/auth';
import { statelessSessions } from '@keystone-6/core/session' ;

const { withAuth } = createAuth({
  listKey: 'User',
  identityField: 'email',
  sessionData: 'name',
  secretField: 'password',
  initFirstItem: {
    fields: ['name', 'email', 'password'],
  },
});

let sessionSecret = '-- DEV COOKIE SECRET; CHANGE ME --';
let sessionMaxAge = 60 * 60 * 24 * 30; // 30 days

const session = statelessSessions({
  maxAge: sessionMaxAge,
  secret: sessionSecret,
});

export { withAuth, session }

keystone.ts

認証とセッション

Keystone アプリにパスワード、セッション データ、および認証を追加する方法を学びます。

公開ワークフロー

keystone.ts

import { config, list } from '@keystone-6/core';
import { allowAll } from '@keystone-6/core/access';
import { text, relationship, timestamp, select } from '@keystone-6/core/fields';

const lists = {
  User: list({
    access: allowAll,
    fields: {
      name: text({ validation: { isRequired: true } }),
      email: text({ validation: { isRequired: true }, isIndexed: 'unique' }),
      posts: relationship({ ref: 'Post.author', many: true }),
    },
  }),
  Post: list({
    access: allowAll,
    fields: {
      title: text(),
      publishedAt: timestamp(),
      author: relationship({
        ref: 'User.posts',
        ui: {
          displayMode: 'cards',
          cardFields: ['name', 'email'],
          inlineEdit: { fields: ['name', 'email'] },
          linkToItem: true,
          inlineCreate: { fields: ['name', 'email'] },
        },
      }),
      status: select({
        options: [
          { label: 'Published', value: 'published' },
          { label: 'Draft', value: 'draft' },
        ],
        defaultValue: 'draft',
        ui: { displayMode: 'segmented-control' },
      }),
    },
  }),
};

export default config({
  db: {
    provider: 'sqlite',
    url: 'file:./keystone.db',
  },
  lists,
});

パスワードフィールドを追加する

Keystone のパスワードフィールドは、データベース内のパスワードのハッシュ化や、管理 UI 入力フィールドのパスワードのマスキングなど、一般的なパスワード セキュリティの推奨事項に従っています。
keystone.ts

公開ワークフロー

Keystoneの select フィールドと timestamp フィールドを使用して、アプリケーションに出版ワークフローを作成する方法を学びましょう。

リレーションシップの作成

keystone.ts

import { config, list } from '@keystone-6/core';
import { allowAll } from '@keystone-6/core/access';
import { text, relationship } from '@keystone-6/core/fields';

const lists = {
  User: list({
    access: allowAll,
    fields: {
      name: text({ validation: { isRequired: true } }),
      email: text({ validation: { isRequired: true }, isIndexed: 'unique' }),
      posts: relationship({ ref: 'Post.author', many: true }),
    },
  }),
  Post: list({
    access: allowAll,
    fields: {
      title: text(),
      author: relationship({
        ref: 'User.posts',
        ui: {
          displayMode: 'cards',
          cardFields: ['name', 'email'],
          inlineEdit: { fields: ['name', 'email'] },
          linkToItem: true,
          inlineCreate: { fields: ['name', 'email'] },
        },
      }),
    },
  }),
};

export default config({
  db: {
    provider: 'sqlite',
    url: 'file:./keystone.db',
  },
  lists,
});

公開ワークフローを構築する

公開日を追加

keystone.ts

リレーションシップの作成

2 つのコンテンツ タイプを相互に接続する方法と、管理 UI でこれらの接続を行う方法を構成する方法を学びます。

Keystone のインストール

Keystone ブログプロジェクトを立ち上げ、データベースと user リストを使用して実行しました。
keystone.ts

Keystone を学ぶ

空のフォルダーから関係、認証、セッションデータを使用して機能するブログバックエンドを構築する方法を学び、その過程で Keystone のコアコンセプトについての洞察を得ます。

Keystone とは

認証サービスである Keystone は、OpenStack のダッシュボード画面や API に対するアクセスの際のユーザー認証の機能を担います。
OpenStack では、GUI の操作画面でのオペレーションは、各コンポーネントの API を介してすべて処理されるため、必須のコンポーネントです。

静的アセット

Astro は、ほとんどの静的アセットを設定不要でサポートしています。プロジェクトの JavaScript (Astro front-matter スクリプトを含む) のどこでも import 文を使用でき、Astro は最終ビルドにその静的アセットのビルドされた最適化されたコピーを含めます。また、@import は CSS と <style> タグの中でもサポートされています。