Fetch wordpress posts of custom post type using the WP Rest API javascript Client (backbonejs)

Question

I am developing a reactjs backend using the WP REST API. I am now trying to take advantage of the built-in javascript client so I have installed the wpapi node package in my project (https://www.npmjs.com/package/wpapi).

I have enabled the corresponding behavior and endpoints to my CPTs:

...
'show_in_rest'       => true,
'rest_base'          => 'mycptslug',//sustituye a posts
'rest_controller_class' => 'WP_REST_Posts_Controller',
...

and they work perfectly when accessing directly (postman, jquery, browser address bar...).

When replicating the samples of the official npm wpapi module they also work as expected in my installation.

The issue is that I am unable to know how to fetch the posts of my custom post types using the clientjs provided by the wp rest api community. I have not found any working sample on a simple node project. In the official documentation there is no specific information about how to achieve this (for someone with my js skills :)).

I have already tried:

https://github.com/WP-API/WP-API/issues/1299

and follow:

https://bay-a.co.uk/wordpress-tips/wp-api-v2-tips/

but i cannot get it working (eg: Cannot read property 'models' of undefined).

Thank you for your time. I guess it is something a lot of people have already done...

Edit (suggested by Andreyco): My code is like the one pointed in the github issue:

var WPAPI = require('wpapi' );
var wp = new WPAPI({ endpoint: 'http://myurl/wp-json'});
var pI = wp.api.models.Post.extend({
                  urlRoot: 'http://myurl/wp-json/wp/v2/' + '/pi',
                             defaults: {
                                 type: 'my-cpt'
                             }
                         });
var MyPI = wp.api.collections.Posts.extend({
                           url: 'http://myurl/wp-json/wp/v2/' + 'pis',
                             model: pI
                         });

var thePI = new MyPI();

thePI.fetch({
             filter: {
                      nopaging: true
                      }
            }).done( function() {
                             thePI.each( function( mypi ) {
                                 console.log( mypi.attributes );
                             });
                         });

But it gives the following error: Uncaught TypeError: Cannot read property 'models' of undefined. Note that I hard coded the urls because the wpApiSettings constant gave me also undefined error...

Answer 1

Thanks to sdgluck user in github, who gave the solution.

https://github.com/WP-API/node-wpapi/issues/283

I thought the node-wpapi was a node package containing the backbone.js client of the wp rest api, and it is not. So I kept getting errors applying the backbonejs client functions to the installed node-wpapi package.

Hope it helps to any beginner.

Answer 2

Here's a direct link to the documentation that arose from the aforementioned GitHub issue: http://wp-api.org/node-wpapi/custom-routes/ That page documents how to use the wpapi library's registerRoute method to set up custom endpoint handler factories for your own custom post types.