リアルタイムイベントの購読

// セレクションセット `as const` を定義すると、型が
// レスポンスオブジェクトに伝播することが保証されます。
const selectionSet = ['title', 'author', 'posts.*'] as const;

const sub = client.models.Blog.observeQuery(
  filter: { id: { eq: 'blog-id' } },
  selectionSet: [...selectionSet]
).subscribe({
  next(data) {
    handle(data.items)
  }
});

// 更新は同じセレクションセットを使用し、必要なすべての
// フィールドがサブスクライバーに提供されることを保証します。
const { data } = await client.models.Blog.update({
  id: 'blog-id',
  name: 'Updated Name'
}, {
  selectionSet: [...selectionSet]
});

// `Blog`の詳細をいくつか取得しているが、主にセレクションセットを使用して
// すべての関連投稿を取得していることに注意してください。
const selectionSet = ['title', 'author', 'posts.*'] as const;

const sub = client.models.Blog.observeQuery(
  filter: { id: { eq: 'blog-id' } },
  selectionSet: [...selectionSet]
).subscribe({
  next(data) {
    handle(data.items)
  }
});

async function addPostToBlog(
  post: Schema['Post']['createType'],
  blog: Schema['Blog']['type']
) {
  // まずポストを作成します。
  await client.models.Post.create({
    ...post,
    blogId: blog.id
  });

  // ブログを「タッチ」して、サブスクライバーに再レンダリングを通知します。
  await client.models.Blog.update({
    id: blog.id
  }, {
    // サブスクリプションが関連モデルフィールドを探している場合は
    // セレクションセットを含めることを忘れないでください！
    selectionSet: [...selectionSet]
  });
}

import { generateClient, CONNECTION_STATE_CHANGE, ConnectionState } from 'aws-amplify/data'
import { Hub } from 'aws-amplify/utils'
import { Schema } from '../amplify/data/resource';

const client = generateClient<Schema>()

const fetchRecentData = () => {
  const { data: allTodos } = await client.models.Todo.list();
}

let priorConnectionState: ConnectionState;

Hub.listen("api", (data: any) => {
  const { payload } = data;
  if (
    payload.event === CONNECTION_STATE_CHANGE
  ) {

    if (priorConnectionState === ConnectionState.Connecting && payload.data.connectionState === ConnectionState.Connected) {
      fetchRecentData();
    }
    priorConnectionState = payload.data.connectionState;
  }
});

const createSub = client.models.Todo.onCreate().subscribe({
  next: payload => // 受信メッセージを処理
});

const updateSub = client.models.Todo.onUpdate().subscribe({
  next: payload => // 受信メッセージを処理
});

const deleteSub = client.models.Todo.onDelete().subscribe({
  next: payload => // 受信メッセージを処理
});

const cleanupSubscriptions = () => {
  createSub.unsubscribe();
  updateSub.unsubscribe();
  deleteSub.unsubscribe();
}