GraphQL？Amplify Gen2で生成されたGraphQL APIとActiveReportsJSでサクッと帳票

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { helloAmplify } from "../functions/helloamplify/resource";

～～中略～～
const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.publicApiKey()]),

  Invoices: a
    .model({
      InvoiceID: a.id().required(),
      BillNo: a.string().required(),
      SlipNo: a.string().required(),
      CustomerID: a.string().required(),
      CustomerName: a.string().required(),
      Products: a.string().required(),
      Number: a.integer().required(),
      UnitPrice: a.float().required(),
      Date: a.string().required(),
    })
    .identifier(["InvoiceID"])
    .authorization((allow) => [
      allow.publicApiKey(),
      allow.authenticated(),        // Cognitoユーザープール認証（ベアラー認証）
    ]),    
  
  helloAmplify: a
    .query()
    .returns(a.string())
    .authorization((allow) => [allow.publicApiKey()])
    .handler(a.handler.function(helloAmplify)),    
});
～～中略～～

'use client';

import { Core } from "@mescius/activereportsjs";  // ActiveReportsJSのCoreライブラリを読み込み、ライセンス設定などに使用
import { Viewer,Props as ViewerProps} from "@mescius/activereportsjs-react"; // ActiveReportsJSViewerコンポーネント,Props型のインポート
import "@mescius/activereportsjs/pdfexport";      // PDFエクスポートモジュール
import "@mescius/activereportsjs-i18n";           // ローカライズモジュール

import useLicense from '../hooks/useLicense';
import React, { useEffect, useRef } from "react"; 

// ActiveReportsJSのCSS設定
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";


// ViewerWrapper コンポーネント
const ViewerWrapper = (props: ViewerWrapperProps) => {
  // ライセンス読み込み状態
  const isLicenseLoaded = useLicense(Core, 'activereportsjs');
  // Viewerコンポーネントにアクセスするためのrefを作成
  const viewerRef = useRef<Viewer>(null);

  useEffect(() => {
    if (isLicenseLoaded && viewerRef.current) {
      viewerRef.current.Viewer.open(props.reportUri, { ReportParams: [props.reportParams] });
    }
  }, [props.reportUri, isLicenseLoaded, props.reportParams]);

  // ライセンスが読み込まれるまでは、ローディングメッセージを表示
  if (!isLicenseLoaded) {
    return <div>Loading license...</div>;
  }

  // Viewerレンダリング
  return <Viewer {...props} ref={viewerRef} />;
};

// ViewerWrapperProps型
export type ViewerWrapperProps = ViewerProps & { reportUri: string; reportParams?: any };

// ViewerWrapperコンポーネントをデフォルトエクスポート
export default ViewerWrapper;

"use client";
import type { NextPage } from "next";
import React, { useEffect, useState } from "react";

import { fetchAuthSession } from "aws-amplify/auth";
import type { ViewerWrapperProps } from "../../components/ReportViewer";


// 動的インポートを使用して、レポートビューワのラッパーをロードします。詳細については、「https://nextjs.org/docs/advanced-features/dynamic-import」を参照してください。
import dynamic from "next/dynamic";
const Viewer = dynamic<ViewerWrapperProps>(
  async () => {
    return (await import("../../components/ReportViewer")).default;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    const fetchToken = async () => {
      try {
        const session = await fetchAuthSession();
        // fetchAuthSession()の返り値からidTokenまたはaccessTokenを取得
        const accessToken = session.tokens?.accessToken?.toString();
        setToken(accessToken ?? null);
        console.log("Access Token:", accessToken);
      } catch (e) {
        setToken(null);
      }
    };
    fetchToken();
  }, []);

  return (
    <div
      style={{ width: "100%", height: "100vh" }}
    >
      <Viewer
        reportUri="reports/Invoice_green.rdlx-json"
        language="ja"
        reportParams={{ Name: "Bearer", Value: token }}
      />
    </div>
  );
};

export default Home;

WIJMO_LICENSE_KEY = "取得した開発用ライセンスキー"　
ACTIVEREPORTSJS_LICENSE_KEY = "取得した開発用ライセンスキー"

version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    build:
      commands:
        - npm run build
        - echo "WIJMO_LICENSE_KEY=$WIJMO_LICENSE_KEY" >> .env
        - echo "ACTIVEREPORTSJS_LICENSE_KEY=$ACTIVEREPORTSJS_LICENSE_KEY" >> .env
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*
      - node_modules/**/*

aws configure sso

npx ampx sandbox --profile <認証情報を設定したプロファイル 例:amplify-policy-xxxxxx>

npm run dev