Error: useFirestoreDataSource Firestore not initialised in useDataSource

[C-Coretex]

HI!
I'm new to FireCMS and I'm trying to use fetchCollection to check if the user is listed in the "admins" collection.
But I get this error:

The code is here:

const {
        firebaseApp,
        firebaseConfigLoading,
        configError,
        firebaseConfigError
    } = useInitialiseFirebase({ firebaseConfig });

    const test = useCustomDatasource({ firebaseApp });
    console.log(firebaseApp)
    let a = test.fetchCollection({ path: "admins", schema: adminSchema });

And when I console.log firebaseApp, it is undefined:

But without the "fetch collection" the FireCMS launches correctly

<div>
            <FirebaseCMSApp
                name={"DoubleCoffee Admin Panel"}
                authentication={myAuthenticator}
                logo={logo}
                navigation={navigation}
                firebaseConfig={firebaseConfig}
            />
</div>

useDataSource code:

import { useFirestoreDataSource, DataSource,FetchCollectionProps, FetchEntityProps, Entity, SaveEntityProps, DeleteEntityProps, Property } from "@camberi/firecms";
import { FirebaseApp } from "firebase/app";

type CustomDataSourceProps = { firebaseApp?: FirebaseApp; };

export function useCustomDatasource({ firebaseApp }: CustomDataSourceProps):DataSource {
    const firestoreDataSource = useFirestoreDataSource({ firebaseApp });

    return {
        fetchCollection<M>(props: FetchCollectionProps<M>): Promise<Entity<M>[]>{
            if(props.path === "your_path_custom"){
                // make your custom http call and return your Entities
			}
			console.log("bbb");
			//console.log(firestoreDataSource.fetchCollection(props));
            return firestoreDataSource.fetchCollection(props);
        },
        fetchEntity<M>(props: FetchEntityProps<M>): Promise<Entity<M>>{
            if(props.path === "your_path_custom"){
                // make your custom http call and return your Entities
            }
            return firestoreDataSource.fetchEntity(props);
        },
        saveEntity<M>(props: SaveEntityProps<M>): Promise<Entity<M>>{
            if(props.path === "your_path_custom"){
                // make your custom http call and return your Entities
            }
            return firestoreDataSource.saveEntity(props);
        },
        deleteEntity<M>(props: DeleteEntityProps<M>): Promise<void>{
            return firestoreDataSource.deleteEntity(props);
        },
        checkUniqueField(path: string, name: string, value: any, property: Property, entityId?: string): Promise<boolean>{
            return firestoreDataSource.checkUniqueField(path, name, value, property, entityId);
        }
    }
}

[fgatti675]

Hi @C-Coretex
The approach you are following is meant to build your custom data source, so not using Firestore. You don't need to do that unless you want to persist or fetch data from a different source than Firestore.
If your admins collection is in Firestore, you can use the Datasource that is provided by FireCMS.
In order to do that, just use the hook useDataSource (provided by the library, no need to create your own!)

[C-Coretex]

It sounds nice, but now there is this error:

const dataSource = useDataSource();
    let admins: Promise<Entity<admin>[]>;
    new Promise(() =>
    {
        admins = dataSource.fetchCollection({ path: "admins", schema: adminSchema });
    }).then(() => { console.log(admins) });

[fgatti675]

Make sure you are using that hook in a component under FirebaseCMSApp or FireCMS

[C-Coretex]

But how can I use this hook under FirebaseCMSApp if I need to fetch data in Authenticator function that is called before FirebaseCMSApp initialization

[C-Coretex]

I would be thankful if you provide example of how to use dataSource.fetchCollection for authentication

[fgatti675]

Hi @C-Coretex if you are building an Authenticator
You get the dataSource as a prop in your function:

import { User as FirebaseUser } from "firebase/auth";
import { Authenticator } from "@camberi/firecms";

const myAuthenticator: Authenticator<FirebaseUser> = async ({
                                                                user,
                                                                authController,
                                                                dataSource
                                                            }) => {
  
    return true; // Allow
};

[C-Coretex]

It worked! Thanks a lot

[fgatti675]

My pleasure :)