Use a custom data source

FireCMS is based on the idea of declarative data sources. This means that you can define your collections and entities in a declarative way, and FireCMS will take care of the rest. We provide a default datasource that works with Firestore, but you can also use your own data sources.

Custom data sources

FireCMS allows you to use your own data sources. This is useful if you want to use FireCMS with a different database, or if you want to use a different Firestore instance.

Data sources are implemented as objects that implement the [DataSource] interface.

Since FireCMS is a CMS based on React, you can use the hooks provided by FireCMS to develop your own data sources.

The default datasource is implemented in the [useFirestoreDataSource] hook. You can call this hook from your own data source to get the default implementation and extend it. When defining your own data source, you need to implement all the methods defined in the [DataSource] interface.

Example custom datasource

Let's define a custom data source that will allow us to override the default implementation when fetching and saving data for a specific path only:

import {
    CMSType,
    DataSource,
    DeleteEntityProps,
    Entity,
    EntityCollection,
    FetchCollectionProps,
    FetchEntityProps,
    ResolvedProperty,
    SaveEntityProps,
    useFirestoreDataSource
} from "firecms";
import { FirebaseApp } from "firebase/app";

type CustomDataSourceProps = { firebaseApp?: FirebaseApp };

/**
 * This is an example of a custom data source.
 * It is a React Hook that returns a {@link DataSource} object.
 * @param firebaseApp
 */
export function useCustomDatasource({ firebaseApp }: CustomDataSourceProps): DataSource {

    const firestoreDataSource = useFirestoreDataSource({
        firebaseApp
    });

    return {
        fetchCollection<M extends {
            [Key: string]: CMSType
        }>(props: FetchCollectionProps<M>): Promise<Entity<M>[]> {
            if (props.path === "your_path_custom") {
                // make your custom http call and return your Entities
            }
            return firestoreDataSource.fetchCollection(props);
        },
        fetchEntity<M extends {
            [Key: string]: CMSType
        }>(props: FetchEntityProps<M>): Promise<Entity<M> | undefined> {
            if (props.path === "your_path_custom") {
                // make your custom http call and return your Entities
            }
            return firestoreDataSource.fetchEntity(props);
        },
        saveEntity<M extends {
            [Key: string]: CMSType
        }>(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 extends {
            [Key: string]: CMSType
        }>(props: DeleteEntityProps<M>): Promise<void> {
            return firestoreDataSource.deleteEntity(props);
        },
        checkUniqueField(path: string, name: string, value: any, property: ResolvedProperty, entityId?: string): Promise<boolean> {
            return firestoreDataSource.checkUniqueField(path, name, value, property, entityId);
        },
        generateEntityId(path: string) {
            return firestoreDataSource.generateEntityId(path);
        },
        countEntities(path: {
            path: string,
            collection: EntityCollection,
        }): Promise<number> {
            return firestoreDataSource.countEntities(path);
        }
    }
}

Using a custom data source

Once you have defined your custom data source, you can use it in your custom [FireCMS] instance (keep in mind that you can't use a custom data source with FirebaseCMSApp).

You will need to create a custom app, and use your custom data source when creating the FireCMS instance.

Check the Custom CMS app instructions to learn how to create a custom app. Replace the useFirestoreDataSource hook with your custom data source.

tip

You can also customise in the same way the other components used internally by FireCMS.