fetching via fetch/ajax gutenberg block data from third party
-
17-03-2021 - |
Pergunta
I'm trying to use fetch
to grab information from a 3rd party API which is rate-limited. Instead of doing the API on the front-end I'm trying to use fetch
to do the API call in the edit function. I've seemingly have the fetch working, but I can't seem to save the data. Might someone suggest where I'm going wrong?
Attributes look like:
attributes: {
url: {
type: 'string',
selector: '.o_microlink',
attribute: 'href',
default: '',
},
title: {
type: 'string',
selector: '.o_microlink',
default: '',
},
}
Edit function looks like:
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>;
}
Save function is pretty standard:
save: props => {
return (
<div className={ [props.className, 'o_microlink'].join( ' ' ) }>
<a href={ props.url}> { props.title } </a>
</div>
);
}
Solução
Well, I figured it out. Though my solution is probably far from elegant (I'm not making concessions for timeouts or usability/accessibility). My problem was mostly overzealous configuration, copy and paste errors, and needing to apply async/await keywords.
Attributes look like this:
attributes: {
url: {
source: 'attribute',
type: 'string',
selector: '.o_microlink',
attribute: 'href',
},
title: {
type: 'string',
source: 'text',
selector: '.o_microlink',
}
The edit function looks like this:
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>;
}
The notable requirement is the async keyword on the arrow function and the two await keywords on the assignments. (I'm not catching the error here or setting the user-agent to anything useful.) The url value
in onChangeURL
is being set as an array of one item and I'm not sure why.
And the save function:
save: ({ attributes, className }) => {
return <div className={ className }>
<a className="o_microlink" href={ attributes.url }> { attributes.title } </a>
</div>;
}
Which is pretty standard but I had put the custom class in the wrong place.