plugin development - URL issue retrieving Custom Post Types using Backbone JS API

admin管理员组

文章数量:1314564

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

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

• custom-post-types
• plugin-development
• javascript
• rest-api
• backbone

Share Improve this question asked Nov 24, 2020 at 3:13 LaurentLaurent 22444 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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( ... ) )

本文标签： plugin developmentURL issue retrieving Custom Post Types using Backbone JS API