dataset-subscription-hook.js

import React from "react";

const useDataSubscription = (tdx, datasetId, selector, options) => {
    const [data, setData] = React.useState([]);

    React.useEffect(
        () => {
            let subscription;
            let observer;
            if (tdx) {
                subscription = tdx.subscribe(
                    "dataset-data",
                    [
                        datasetId,
                        selector,
                        options
                    ],
                    () => {
                        const clientSelector = {...selector, _d: datasetId};
                        observer = tdx.cache.data.find(clientSelector).observe(
                          () => setData(tdx.cache.data.find(clientSelector, options))
                        );
                    }
                );
            }

            return () => {
                observer && observer.stop();
                subscription && tdx.unsubscribe(subcription);
            }
        },
        []
    );
    
    return data;
};

const SubcriptionTest = ({context}) => {    
    const data = useDataSubscription(
        context.tdxConnections.defaultTDX,
        "B1eaPY-F7f"
    );

    return (
        <div>
            <p>{data.length}</p>
            <pre>
                {JSON.stringify(data, null, 2)}
            </pre>
        </div>
    );
};

export default SubcriptionTest;