Nuxt Nation カンファレンスが開催されます。11月12日~13日にご参加ください。

surrealdb
nuxt-surrealdb

SurrealDB の使用を簡素化する Nuxt モジュール

nuxt-surrealdb

Nuxt SurrealDB

npm version npm downloads License Nuxt

SurrealDB の使用を簡素化する Nuxt モジュールです。

クイックセットアップ

モジュールを Nuxt アプリケーションにインストールします

npx nuxi module add nuxt-surrealdb

次に、デフォルトのデータベースプリセットを編集し、Nuxt アプリで Nuxt SurrealDB を使用します ✨

機能

  • 📦 コンポーザブル/関数ごとに複数のデータベースを使用できるようにするカスタムデータベースプリセット。
  • 🚀 それぞれ $fetchuseFetch に基づいた、カスタムビルトイン $surrealFetchuseSurrealFetch
  • ⚡️ $surrealRPCuseSurrealRPC を介した RPC エンドポイント のビルトインサポート。
  • 🏗️ SurrealDB とのプライベートネットワーク通信のためのサーバーサイドプライベートDBプリセットを備えた、ビルトイン Nuxt サーバー useSurrealRPC ユーティリティ。
  • 💡 各 RPC メソッドは useSurrealDB エクスポート関数にマッピングされます。
  • 🌟 useSurrealWS コンポーザブルを使用した RPC メソッドによる Websocket 通信のビルトインサポート。

データベースプリセット

default プリセットをカスタマイズしたり、nuxt.config.ts または .env を介して独自のデータベースプリセットを定義したりできます。

!注意 下記の shop のようにカスタムプリセットに変数を渡す場合は、nuxt.config.ts 内で空のオブジェクトとして初期化することが重要です

NUXT_PUBLIC_SURREALDB_DATABASES_SHOP_HOST="https://example.com"
NUXT_PUBLIC_SURREALDB_DATABASES_SHOP_WS="wss://example.com"
NUXT_PUBLIC_SURREALDB_DATABASES_SHOP_NS="surrealdb"
NUXT_PUBLIC_SURREALDB_DATABASES_SHOP_DB="docs"
NUXT_PUBLIC_SURREALDB_DATABASES_SHOP_SC="user"

# To add authentication server side (this does not override the client's token)
# As a Bearer
NUXT_SURREALDB_DATABASES_SHOP_AUTH="mySuperLongBearerToken"
# Or as an object
NUXT_SURREALDB_DATABASES_SHOP_AUTH_USER="root"
NUXT_SURREALDB_DATABASES_SHOP_AUTH_PASS="root"
export default defineNuxtConfig({
  modules: ['nuxt-surrealdb'],
  surrealdb: {
    databases: {
      default: {
        host: 'https://example.com',
        ws: 'wss://example.com',
        NS: 'production',
        DB: 'website'
      },

      crm: {
        host: 'https://crm.example.com',
        ws: 'wss://crm.example.com',
        NS: 'demo',
        DB: 'crm',
        // The following auth example is exposed client side!
        auth: 'mySuperLongBearerToken'
      },

      shop: {},
    },
    server: { // the following add auth only server side
      databases: {
        default: {
          auth: '', // then edit it via NUXT_SURREALDB_DATABASES_DEFAULT_AUTH
          // OR
          auth: {
            user: '', // then edit it via NUXT_SURREALDB_DATABASES_DEFAULT_AUTH_USER
            pass: '' // then edit it via NUXT_SURREALDB_DATABASES_DEFAULT_AUTH_PASS
          }
        }
      }
    }
  },
  // To change a db preset during development it is best to do the following
  $development: {
    surrealdb: {
      databases: {
        default: {
          host: 'https://127.0.0.1:8000',
          ws: 'ws://127.0.0.1:8000'
        }
      }
    }
  },
  // ...
})

!注意 開発環境と本番環境で異なるデータベースプリセットを使用する場合は、上記の例のように、nuxt.config.ts 内で Nuxt のネイティブ $development および $production プロパティ を使用してください。

データベースのプロパティ (上記の surrealdb.server.databases.default.auth など) をサーバーサイドで拡張または変更することも可能です。これは、クライアント側に資格情報を公開せずに、より従来型のデータベース認証アプローチを使用する場合や、プライベートネットワークで異なる host アドレスを使用する場合に特に役立ちます。

次に、データベースプリセットを使用するには、各メインコンポーザブルの最後のパラメーター内で設定するだけです (useSurrealDB から逆構造化された関数もこのオーバーライドをサポートしています)。

// all the functions destructured will be executed against the CRM database
const { query, select } = useSurrealDB({
  database: 'crm',
})

// only the following select will be made against the default database
const { data } = await select('products', {
  database: 'default',
})

// you could also define a one-time only preset
const { data } = await sql(
  'SELECT * FROM products WHERE price < $maxPrice;',
  { maxPrice: 500 },
  {
    database: {
      host: 'https://surrealdb.example.com',
      NS: 'demo',
      DB: 'shop',
    },
  },
)

RPC メソッド

メインの useSurrealDB は、RPC エンドポイントと直接通信する多数の関数をエクスポートします。各関数には2つのバリアントがあり、1つは $ で始まり、もう1つは始まりません。最初のものは、プレーン関数を提 供する $surrealRPC に基づいており、後者は useSurrealFetch (したがって、useFetch) を利用しています。

こちらが完全なリストです

const {
  authenticate, // $authenticate
  create,       // $create
  delete,       // $delete
  info,         // $info
  insert,       // $insert
  invalidate,   // $invalidate
  merge,        // $merge
  patch,        // $patch
  query,        // $query
  remove,       // $remove
  select,       // $select
  signin,       // $signin
  signup,       // $signup
  sql,          // $sql
  update,       // $update
  version,      // $version
} = useSurrealDB()

!注意 sql メソッドは query のエイリアスであり、versionHTTP エンドポイント を使用します。

RPC Websocket

useSurrealWS コンポーザブルは、SurrealDB とのライブ通信を処理するための Websocket 接続を公開します。内部的には @vueuse/coreuseWebsocket を使用しているため、SSR、自動接続、自動切断はデフォルトで自動的に処理されます。データは、入力と data 戻り値の両方で、JSON から string に自動的に解析されます。利用可能な場合、Websocket 接続時に、以前のユーザーログインからの認証トークンがあればそれを利用します。データベースプリセットと Websocket オプションは、コンポーザブルのメイン引数として使用できます。

以下は、Websocket コンポーザブルから利用できる主なメソッドのリストです

const {
  authenticate,
  close,
  create,
  data,
  set,      // alias for `let`
  info,
  insert,
  invalidate,
  kill,
  let,
  live,
  merge,
  open,
  patch,
  query,
  remove,
  rpc,
  select,
  send,
  signin,
  signup,
  sql,      // alias for `query`
  status,
  unset,
  update,
  use,
  ws,
} = useSurrealWS()

!警告 現在、signin メソッドと signup メソッドは利用可能ですが、現在の Websocket 接続に制限されています。したがって、その websocket 接続以外で認証が必要な場合は、SCOPE ユーザー認証にメインの useSurrealAuth コンポーザブルを使用することをお勧めします。


貢献

ローカル開発
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release