web-dev-qa-db-fra.com

récupération via fetch/ajax gutenberg bloquer les données d'un tiers

J'essaie d'utiliser fetch pour récupérer les informations d'une API tierce dont le débit est limité. Au lieu de faire l'API sur le front-end, j'essaie d'utiliser fetch pour faire l'appel d'API dans la fonction d'édition. Apparemment, le fetch fonctionne, mais je n'arrive pas à enregistrer les données. Quelqu'un pourrait-il suggérer où je vais mal?

Les attributs ressemblent à:

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

La fonction d'édition ressemble à:

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>;
}

La fonction de sauvegarde est assez standard:

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

Eh bien, je l'ai compris. Bien que ma solution soit probablement loin d’être élégante (je ne fais pas de concessions sur les délais d’expiration ou la facilité d’utilisation/accessibilité). Mon problème était la plupart du temps une configuration trop zélée, des erreurs de copier/coller et la nécessité d'appliquer des mots-clés async/wait.

Les attributs ressemblent à ceci:

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

La fonction d'édition ressemble à ceci:

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>;

}

L'exigence notable est le mot clé asynchrone sur la fonction flèche et les deux mots clés en attente sur les affectations. (Je n'attrape pas l'erreur ici ni ne configure l'agent utilisateur sur quelque chose d'utile.) L'URL value dans onChangeURL est définie comme un tableau d'un élément et je ne sais pas pourquoi.

Et la fonction de sauvegarde:

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

Ce qui est assez standard mais j'avais mis la classe personnalisée au mauvais endroit.

4
jshwlkr