it-swarm.com.de

abrufen über Fetch/Ajax Gutenberg Block Daten von Dritten

Ich versuche, fetch zu verwenden, um Informationen von einer Drittanbieter-API abzurufen, die auf bestimmte Raten beschränkt ist. Anstatt die API auf dem Front-End auszuführen, versuche ich, fetch zu verwenden, um den API-Aufruf in der Bearbeitungsfunktion auszuführen. Anscheinend funktioniert der Abruf, aber ich kann die Daten scheinbar nicht speichern. Könnte jemand vorschlagen, wo ich falsch liege?

Attribute sehen so aus:

    attributes: {
    url: {
        type: 'string',
        selector: '.o_microlink',
        attribute: 'href',
        default: '',
    },
    title: {
        type: 'string',
        selector: '.o_microlink',
        default: '',
    },
}

Bearbeitungsfunktion sieht so aus:

edit: props => {
    const onChangeURL = async value => {
        const response = await fetch( `https://api.microlink.io?url=${ value }`, {
            cache: 'no-cache',
            headers: {
                'user-agent': 'WP Block',
                'content-type': 'application/json'
              },
            method: 'GET', 
            redirect: 'follow', 
            referrer: 'no-referrer', 
        }).then(
            returned => {
                if (returned.ok) return returned;
                throw new Error('Network response was not ok.');
            }
        );
        let data = await response.json();
        data = data.data;

        props.setAttributes( { url: value } );
        props.setAttributes( { title: data.title} );
    };
    return <div className={ props.className }>
            <RichText
                tagName="div"
                placeholder={ __( 'Add URL here.' ) }
                value={ props.attributes.url }
                onChange={ onChangeURL }
            />
            { ! props.attributes.title ? __( 'Add URL' ) : <div> { props.attributes.title } </div> }
            </div>;
}

Die Speicherfunktion ist ziemlich normal:

save: props => {
    return (
        <div className={ [props.className, 'o_microlink'].join( ' ' ) }>
            <a href={ props.url}> { props.title } </a>
        </div>
    );
}
2
jshwlkr

Nun, ich habe es herausgefunden. Obwohl meine Lösung wahrscheinlich alles andere als elegant ist (ich mache keine Zugeständnisse für Timeouts oder Benutzerfreundlichkeit/Zugänglichkeit). Mein Problem war meist übereifrige Konfiguration, Fehler beim Kopieren und Einfügen und das Anwenden von asynchronen/wartenden Schlüsselwörtern.

Attribute sehen folgendermaßen aus:

attributes: {
    url: {
        source: 'attribute',
        type: 'string',
        selector: '.o_microlink',
        attribute: 'href',
    },
    title: {
        type: 'string',
        source: 'text',
        selector: '.o_microlink',
    }

Die Bearbeitungsfunktion sieht folgendermaßen aus:

edit: ({ attributes, setAttributes, className })  => {

    const onChangeURL = async value => {

        const response = await fetch( `https://api.microlink.io?url=${ value }`, {
            cache: 'no-cache',
            headers: {
                'user-agent': 'WP Block',
                'content-type': 'application/json'
              },
            method: 'GET',
            redirect: 'follow', 
            referrer: 'no-referrer', 
        })
        .then(
            returned => {
                if (returned.ok) return returned;
                throw new Error('Network response was not ok.');
            }
        );

        let data = await response.json();
        data = data.data;

        setAttributes( { url: value[0] } );
        setAttributes( { title: data.title} );
    };

    return <div className={className}>
                <RichText
                    tagName="div"
                    placeholder={__('Add URL here.')}
                    value={attributes.url}
                    onChange={onChangeURL}
                />
                {!attributes.title ? __('Add URL') : <div> {attributes.title} </div>}
             </div>;

}

Die bemerkenswerte Voraussetzung ist das asynchrone Schlüsselwort in der Pfeilfunktion und die zwei wartenden Schlüsselwörter in den Zuweisungen. (Ich fange den Fehler hier nicht ab oder setze den User-Agent auf nichts Nützliches.) Die URL value in onChangeURL wird als Array eines Elements festgelegt, und ich bin mir nicht sicher, warum.

Und die Speicherfunktion:

save: ({ attributes, className }) => {
    return <div className={ className }>
            <a className="o_microlink" href={ attributes.url }> { attributes.title } </a>
        </div>;
}

Das ist ziemlich normal, aber ich hatte die benutzerdefinierte Klasse an der falschen Stelle platziert.

4
jshwlkr