はじめに react-adminは規模のわりにドキュメントが薄くてソースコードやサンプルで読み解くしかないことがけっこうある気がする。dataProviderをカスタムする際にもドキュメントに書かれていることだけではぶっちゃけあんまり実用的なことができない。 今回はカスタムしたdataProviderで発生したエラーをNotification表示するのをちょっといじりたいなというあるあるなケースでいろいろ調べ回って時間を食ったので忘れないように書いておこうと思いました。 dataProviderでのエラー処理 まずdataProviderはPromiseを返さなければならない。エラーが発生した場合Notificationのイベントをどう発生させるかについてはError Formatに書いてある実装がベターな感じ。HttpErrorオブジェクトを生成してPromise.rejectを返す。
Supabaseにはユーザー認証のAPIがあり、その認証システムをreact-adminで使う方法です。 authProviderを実装する react-adminには認証の仕組みがあり、これは好きな認証システムを使えます。自前の認証システムを使うには、Auth Providerを実装します。 なので、Supabaseの認証システムをreact-adminに組み込みたいときは、Supabaseの認証APIを使ったAuth Providerを作ることになります。 その実装は次のようになります: import { AuthProvider } from "ra-core"; import { UserIdentity } from "react-admin"; import { supabase } from "./supabaseClient"; const authProvider: Au
導入 admin dashboardのtemplateを探していたところたまたまプロジェクトをコピーするタイプではなくライブラリ形式で提供している react-admin を見つけました。 これがとてつもなく作業効率が良かったため使い方を備忘録として記録します。 また、知っている人には蛇足な情報も多分に含みますため、不要な方はお手数ですが適宜読み飛ばしていただければと思います。 概要 UIコンポーネントなどをライブラリの形式で提供している管理画面作成用OSS。 画面に表示するデータはAPI(Server side)から取得することが前提の設計になっており、外部通信専用プラグインも別に提供されている。 本記事内の注意 本記事の作成において、筆者がVSCodeを使用している都合上Linterの設定・動作確認はVSCodeで行っています。 またLinterは仕様が頻繁に変わる傾向にあり、少し前の
最近、AWS関連の記事8月5日、8月12日、8月18日を書いているのはバックエンドの開発を行っているからです。バックエンドはフロントエンドにAPIを提供するのが一番の目的ですが、管理画面も重要な機能だと思います。 管理画面といえば業務フローをサポートするための画面もありますが、ここではデータの確認や簡単な修正、いわゆるデーターベースのCRUD画面(Create, Read, Update, Delete)に付いての書きます。 React-admin、PostGraphileとは CRUD画面を簡単に作成できるツールやライブライリーは多く存在します。たとえばRuby on RailsにはRailsAdminのような有名なライブラリーがあります。 今回の仕事の参加する開発者はReactプログラマーなので、管理画面もReactベースのものが良いと思います。Reactベースの管理画面ライブライリー
ReactAdminを少し触ってみました。 marmelab.com そもそもReactAdminとはReactでダッシュボードを作成するためのフレームワークのようで、公式のページでは"A Web Framework for B2B applications"とあるので凝ったページというよりは一般的なダッシュページとかを簡単に作れるのかなと思います。 公式のドキュメントは以下になりまして、"Data Provider"と"Auth Provider"がAdminコンポーネントプロパティになっていまして、それぞれ一覧データの取得と認証の設定になります。それからResourceコンポーネントが一覧に出す項目の内容を設定するためのコンポーネントになっています。 marmelab.com とりあえずAuth Providerの設定を行い認証が出来るところまで確認できました。 github.com
react-admin A frontend Framework for building data-driven applications running in the browser, on top of REST/GraphQL APIs, using React and Material Design. Open sourced and maintained by marmelab. Check out the demos page for real-life examples. Installation React-admin is available from npm. You can install it (and its required dependencies) using: How To Learn React-Admin Read the Tutorial for
読んだのでメモ React-admin - My First Project Tutorial 一覧画面 React-admin では一覧表は管理画面によくあるテーブル形式で表示する。 dataProvider // in src/App.js import * as React from "react"; import { Admin } from 'react-admin'; import jsonServerProvider from 'ra-data-json-server'; const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com'); const App = () => <Admin dataProvider={dataProvider} />; export default A
react-admin React-adminは、React + Redux + Redux-Saga + React-Query + MUI + React-Router + React Hook Formなどを活用した、管理サイトのために設計されたフロントエンドフレームワークです。 デモはこちらです。 管理サイトだけでなく、データ中心の会員制のサイトなどにも使えます。 実際に仕事でちょっとした会員制のWebサイトを短納期で作れました。シンプルで保守性の高いプログラムにできます。 ra-language-japanese デフォルトは英語ですが、フレームワーク自体が翻訳対応しており、翻訳キーと翻訳文字列を対にしたオブジェクトを渡すことで日本語化できます。 日本では知名度が低いのか、最新の翻訳ファイルが見つけられませんでした。とてもお世話になっているので、少しでも貢献できれば。ということで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く