Applicazioni React

Setup

Innanzitutto, è necessario fare il setup del connettore seguendo la sezione Setup, copiando il file discovery-cms-connector.js dentro la cartella public e aggiungendo all'interno del file App.js il seguente script:

<script async={true} src={'discovery-cms-connector.js'} />

Generazione pagine

Per recuperare il contenuto di una pagina viene utilizzato l'hook useDiscoveryPage() che prende in input due parametri, ovvero lo slug utilizzato per la pagina e un oggetto con delle opzioni. La visualizzazione dei dati nell'html viene effettuata attraverso <DiscoveryContext> e l'elemento <DiscoveryComponents>.

Di seguito un esempio di utilizzo di quanto appena descritto:

import {DiscoveryContext, DiscoveryComponents, useDiscoveryPage} from '@discoverycms/connector';

function Page() {
    const data = useDiscoveryPage('/home', {
                    /// options for the API
                    token: router.query.token
                 });
    
    if (data === null) {
        return;
    }

    return (
        <DiscoveryContext.Provider value={data}>
            <DiscoveryComponents />
        </DiscoveryContext.Provider>
    )
}

In questo esempio, innanzitutto recuperiamo i dati della pagina. Una volta recuperati i dati, li forniamo al DiscoveryContext e successivamente usiamo DiscoveryComponents per creare tutti i componenti della pagina.

Quando viene creato un componente nell'applicazione React si assume che riceva un id come parametro (id associato al componente lato Discovery), in seguito utilizzando il metodo useComponentData(), al quale viene passato l'id, si ricavano i dati. Quindi, il nostro componente dovrebbe avere una struttura simile a questa:

import {useComponentData} from '@discoverycms/connector';

function Component({componentId}) {
    const data = useComponentData(componentId);
    
    return(
        <div data-discovery-id={componentId}>
            ...
        </div>
    )
}

L'utilizzo del contesto React non è obbligatorio. E' infatti possibile recuperare i dati dei singoli componenti dal payload della risposta applicando una propria logica. Tuttavia questo approccio non è consigliato in quanto questa procedura viene semplificata dal connettore tramite l'utilizzo del contesto e devono quindi sussistere condizioni particolari per cui non debba essere sfruttata.

Infine, l'utilizzo del contesto non è necessario con i Content in quanto essi non includono una rappresentazione grafica ma solamente dati, ed è quindi comunque necessario realizzare manualmente la struttura della pagina.