Wordpress - In Gutenberg, now that withAPIData is being deprecated, how can I do an async call to a custom endpoint?
It's worth noting that the answer above is out of date. The data store should now look like this:
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: 'RECEIVE_USER_ROLES',
path,
};
},
};
const store = registerStore( 'matt-watson/secure-block', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
RECEIVE_USER_ROLES( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = yield actions.receiveUserRoles( '/matt-watson/secure-blocks/v1/user-roles/' );
return actions.setUserRoles( userRoles );
},
},
} );
I've updated my tutorial: https://mwatson.co.uk/working-with-gutenberg-and-the-wordpress-rest-api/
I've cracked it!
const actions = {
setUserRoles( userRoles ) {
return {
type: 'SET_USER_ROLES',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: 'RECEIVE_USER_ROLES',
path,
};
},
};
const store = registerStore( 'matt-watson/secure-block', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case 'SET_USER_ROLES':
return {
...state,
userRoles: action.userRoles,
};
case 'RECEIVE_USER_ROLES':
return action.userRoles;
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = apiFetch( { path: '/matt-watson/secure-blocks/v1/user-roles/' } )
.then( userRoles => {
return actions.setUserRoles( userRoles );
} )
yield userRoles;
},
},
} );
This sets the state of the userRoles and returns the userRoles once resolved.
You can then access this like so:
....
edit: withSelect( ( select ) => {
return {
roles: select('matt-watson/secure-block').receiveUserRoles(),
};
} )( props => {
....