react-admin-firebase-lazy-loading (v.3.2.20)
NPM Package for react-admin-firebase with Lazy Loading update
react-admin-firebase-lazy-loading
yarn add react-admin-firebase-lazy-loading
New Features
- lazy-loading - fetching lists and references, using native Firebase SDK Query for filters, sort and pagination
- it's solution for the High Reads issue in library (pre-loading all collection docs)
- Firestore reads logger - functionality for testing lazy-loading solution - it's logging
all reads performed by library (for current page, for session and custom resettable)
- it's providing React hooks to access logged values
- Relative File Paths - new option, if set to true, only relative paths to files in storage will be saved in documents - more desciption in Options section
Original library
react-admin-firebase (npm) react-admin-firebase (GitHub)
react-admin-firebase
A firebase data provider for the React-Admin framework. It maps collections from the Firebase database (Firestore) to your react-admin application. It's an npm package!
Features
- Firestore Dataprovider (details below)
- Firebase AuthProvider (email, password)
- Login with: Google, Facebook, Github etc... (Example Here)
- Forgot password button... (Example Here)
- Firebase storage upload functionality
Pull requests welcome!!
Firestore Dataprovider Features
- Dynamic caching of resources
- All methods implemented;
(GET, POST, GET_LIST ect...)
- Filtering, sorting etc...
- Ability to manage sub collections through app configuration
- Ability to use externally initialized firebaseApp instance
- Override firestore random id by using "id" as a field in the Create part of the resource
- Upload to the firebase storage bucket using the standard
<FileInput />
field - Realtime updates, using ra-realtime
- Optional watch collection array or dontwatch collection array
Get Started
yarn add react-admin-firebase firebase
or
npm install --save react-admin-firebase firebase
Demos Basic
A simple example based on the React Admin Tutorial.
Prerequisits
- Create a
posts
collection in the firebase firestore database - Get config credentials using the dashboard
Options
;const config =apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa";// All options are optionalconst options =// Use a different root document to set your resource collections, by default it uses the root collections of firestorerootRef: 'root-collection/some-doc'// Your own, previously initialized firebase app instanceapp: firebaseAppInstance// Enable logging of react-admin-firebaselogging: true// Resources to watch for realtime updates, will implicitly watch all resources by default, if not set.watch: 'posts'// Resources you explicitly dont want realtime updates fordontwatch: 'comments'// Authentication persistence, defaults to 'session', options are 'session' | 'local' | 'none'persistence: 'session'// Disable the metadata; 'createdate', 'lastupdate', 'createdby', 'updatedby'disableMeta: false// Prevents document from getting the ID field added as a propertydontAddIdFieldToDoc: false// Adds 'deleted' meta field for non-destructive deleting functionality// NOTE: Hides 'deleted' records from list views unless overridden by filtering for {deleted: true}softDelete: false// Changes meta fields like 'createdby' and 'updatedby' to store user IDs instead of email addressesassociateUsersById: false// Casing for meta fields like 'createdby' and 'updatedby', defaults to 'lower', options are 'lower' | 'camel' | 'snake' | 'pascal' | 'kebab'metaFieldCasing: 'lower'// Instead of saving full download url for file, save just relative path and then get download url// when getting docs - main use case is handling multiple firebase projects (environments)// and moving/copying documents/storage files between them - with relativeFilePaths, download url// always point to project own storagerelativeFilePaths: false// Use firebase sdk queries for pagination, filtering and sortinglazyLoading:enabled: false// Logging of all reads performed by app (additional feature, for lazy-loading testing)firebaseReadsLogger:enabled: falselocalStoragePrefix // optionalconst dataProvider = ;const authProvider = ;const firebaseRealtime = ;
Data Provider
;;;;const config =apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa";const options = {};const dataProvider = ;...<AdmindataProvider=dataProvider><Resource name="posts" list=PostList show=PostShow create=PostCreate edit=PostEdit/></Admin>...
Auth Provider
Using the FirebaseAuthProvider
you can allow authentication in the application.
const dataProvider = ;const authProvider = ;...<AdmindataProvider=dataProviderauthProvider=authProvider>...
Also checkout how to login with: Google, Facebook, Github etc... (Example Here)
And you might want a "Forgot password" button... (Example Here)
Note
To get the currently logged in user run const user = await authProvider.checkAuth()
, this will return the firebase user object, or null if there is no currently logged in user.
Realtime Updates!
NOTE: Realtime updates were removed in react-admin
v3.x (see https://github.com/marmelab/react-admin/pull/3908). As such, react-admin-firebase
v3.x also does not support Realtime Updates. However, much of the original code used for this functionalaity in react-admin
v2.x remains - including the documentation below. For updates on the implementation of realtime please follow these issues:
- https://github.com/benwinding/react-admin-firebase/issues/49
- https://github.com/benwinding/react-admin-firebase/issues/57
Get realtime updates from the firebase server instantly on your tables, with minimal overheads, using rxjs observables!
...;...const dataProvider = ;const firebaseRealtime = ;...<AdmindataProvider=dataProvidercustomSagas=firebaseRealtime>...
Realtime Options
Trigger realtime on only some routes using the options object.
...const dataProvider = ;const options =watch: 'posts' 'comments'dontwatch: 'users'const firebaseRealtime = ;...
react-admin-firebase
?
Help Develop git clone https://github.com/benwinding/react-admin-firebase
yarn
yarn start-demo
Now all local changes in the library source code can be tested immediately in the demo app.
Run tests
To run the tests, either watch for changes or just run all tests.
yarn test-watch
yarn test