URL issue retrieving Custom Post Types using Backbone JS API

Question

URL issue retrieving Custom Post Types using Backbone JS API

Laurent

2020年11月24日 13:54

I have a Custom Post Type called pronews. I registered it with show_in_rest enabled. I'm using WordPress 5.5.

I then have this code:

export const ProPost  = wp.api.models.Post.extend( {
    urlRoot: wpApiSettings.root + 'wp/v2/pronews',
    defaults: {
        type: 'pronews',
    },
} );
export const ProPosts = wp.api.collections.Posts.extend( {
    url: wpApiSettings.root + 'wp/v2/pronews',
    model: ProPost,
} );

const post = new ProPost( {id: 2454} );

console.log( post );
console.log( 'post urlRoot:' + post.urlRoot );
console.log( 'post url:' + post.url );

post.fetch().then( ( response ) = {
    console.log( response )
}, ( why ) = {
    console.log( why.responseJSON.code )
} );

// Double check that the endpoint is functionnal
fetch( wpApiSettings.root + 'wp/v2/pronews/2454' )
    .then( blob = blob.json() )
    .then( ( response ) = {
        console.log( response.id );
    } );

In the console I first get:

{…}
_changing: false
_pending: false
_previousAttributes: Object { type: pronews, id: 2454 }
attributes: Object { type: pronews, id: 2454 }
changed: Object {  }
cid: c3
id: 2454
prototype: Object { urlRoot: https://localhost/wp-json/wp/v2/pronews, defaults: {…}, constructor: i()
 }
ProNews.js:17:9

post urlRoot:https://localhost/wp-json/wp/v2/pronews ProNews.js:18:9
post url:function(){var e=a.get(apiRoot)+a.get(versionString)+(me===i?users/me:i);return _.isUndefined(this.get(id))||(e+=/+this.get(id)),e} ProNews.js:19:9

But the Backbone API's request is done to the wrong urlRoot :

XHRGET https://localhost/wp-json/wp/v2/posts/2454 [HTTP/1.1 404 Not Found 340ms]
rest_post_invalid_id

For debugging, the result of the second HTTP Request using window.fetch, shows that the endpoint for the Custom Post Type exists and is functional:

XHRGET https://localhost/wp-json/wp/v2/pronews/2454 [HTTP/1.1 200 OK 587ms]
2454

Topic backbone rest-api plugin-development custom-post-types Wordpress javascript

Category Web

Sally CJ · Accepted Answer · 2020年11月24日 13:54

Actually, you don't have to extend the Post model (wp.api.models.Post) or Posts collection (wp.api.collections.Posts) because the documentation says:

you will get new models and collections when you add REST API support to your custom post type

And that means, your custom post type will be automatically added to the wp.api.models and wp.api.collections list, i.e. wp.api.models.<key> and wp.api.collections.<key> whereby <key> is the post type slug in camel case. So in your case, the key would be Pronews — or ProNews if the post type was pro-news.

Therefore, all you need to do to get access to the model/collection (or simply put, posts) is:

// Access one model (a single post). ID is required.
const post = new wp.api.models.Pronews( { id: 57 } );

// Access a collection (multiple models/posts).
const posts = new wp.api.collections.Pronews();

Easy, eh? :) ( And if you want, you may extend your post type's model/collection.. e.g. const ProPost = wp.api.models.Pronews.extend( ... ) )

URL issue retrieving Custom Post Types using Backbone JS API

About