How to use wpapi - 10 common examples

/* ... */
        }
    );

    // Namespaces can be saved out to variables:
    const myplugin = site.namespace("myplugin/v1");
    myplugin
        .authors()
        .id(7)
        .then((author: any) => {
            /* ... */
        });
});

// Authenticating with Auto-Discovery
const apiPromise2 = WPAPI.discover("http://my-site.com").then(site => {
    return site.auth({
        username: "admin",
        password: "always use secure passwords"
    });
});

apiPromise2.then(site => {
    // site is now configured to use authentication
});

// You must authenticate to be able to POST (create) a post
const wp2 = new WPAPI({
    endpoint: "http://your-site.com/wp-json",
    // This assumes you are using basic auth, as described further below
    username: "someusername",
    password: "password"

}
    // do something with the returned posts
});

// Promises
wp
    .posts()
    .then((data: any) => {
        // do something with the returned posts
    })
    .catch((err: Error) => {
        // handle error
    });

// Auto-discover
const apiPromise = WPAPI.discover("http://my-site.com");
apiPromise.then(site => {
    // If default routes were detected, they are now available
    site.posts().then((posts: any[]) => {}); // etc

    // If custom routes were detected, they can be accessed via .namespace()
    // Custom routes have different methods to generate requests, so .authors()
    // does not necessarily exist. You have use force type  or 'as
    // Request'
    (site.namespace("myplugin/v1").authors() as WPAPI.WPRequest).then(
        (authors: any[]) => {
            /* ... */
        }
    );

    // Namespaces can be saved out to variables:
    const myplugin = site.namespace("myplugin/v1");

// Vuex
Vue.use(Vuex);

// Mixins
Vue.mixin({
  methods: mixins,
});

// Lodash
window._ = require('lodash');

/**
 * WP API
 * https://github.com/WP-API/node-wpapi
 */
window.wp = new WPAPI({ endpoint: config.root });
window.apiPromise = WPAPI.discover(config.base_url);

/**
 * Standard UI components
 */
Vue.component('menu-location', require('@/components/partials/menu-location'));
Vue.component('gallery', require('@/components/partials/gallery'));
Vue.component('lightbox', require('@/components/partials/lightbox'));
Vue.component('theme-header', require('@/components/partials/theme-header'));

// Running in dev mode, load routes from API
if (process.env.NODE_ENV !== 'production') {
  WPConfig.getConfig(data => {
    window.config = data;
    EventBus.$emit('config', window.config);
    router.addRoutes(setComponentsToRoutes(window.config.routes));

Vue.use(Vuex);

// Mixins
Vue.mixin({
  methods: mixins,
});

// Lodash
window._ = require('lodash');

/**
 * WP API
 * https://github.com/WP-API/node-wpapi
 */
window.wp = new WPAPI({ endpoint: config.root });
window.apiPromise = WPAPI.discover(config.base_url);

/**
 * Standard UI components
 */
Vue.component('menu-location', require('@/components/partials/menu-location'));
Vue.component('gallery', require('@/components/partials/gallery'));
Vue.component('lightbox', require('@/components/partials/lightbox'));
Vue.component('theme-header', require('@/components/partials/theme-header'));

// Running in dev mode, load routes from API
if (process.env.NODE_ENV !== 'production') {
  WPConfig.getConfig(data => {
    window.config = data;
    EventBus.$emit('config', window.config);
    router.addRoutes(setComponentsToRoutes(window.config.routes));
  });

const plugin = () => ({
    sagas: [pluginSaga],
    reducers: {
      [testActionType]: (state) => {
        countHitPluginOwnActionTypeReducer++
        return state
      },
      [ActionTypes.RequestComplete]: (state) => {
        countHitPluginNativeActionTypeReducer++
        return state
      }
    }
  })

  const { kasiaReducer, kasiaSagas } = kasia({
    wpapi: new Wpapi({ endpoint: '' }),
    plugins: [plugin]
  })

  const rootReducer = combineReducers(kasiaReducer)
  const store = createStore(rootReducer)

  return { store, kasiaSagas }
}

function setup (keyEntitiesBy) {
  queryCounter.reset()

  const { kasiaReducer, kasiaSagas } = kasia({
    wpapi: new Wpapi({ endpoint: '123' }),
    keyEntitiesBy
  })

  const sagaMiddleware = createSagaMiddleware()
  const createStore = compose(applyMiddleware(sagaMiddleware))(_createStore)
  const store = createStore(combineReducers(kasiaReducer), initialState(keyEntitiesBy))
  const runSaga = sagaMiddleware.run

  sagaMiddleware.run(function * () {
    yield kasiaSagas
  })

  store.runSaga = runSaga

  return { store, runSaga }
}

import React, { Component } from 'react';
import Error from 'next/error';
import Menu from '../components/Menu';
import WPAPI from 'wpapi';
import Layout from '../components/Layout';
import PageWrapper from '../components/PageWrapper';
import Config from '../config';

const wp = new WPAPI({ endpoint: Config.apiUrl });

class Post extends Component {
  static async getInitialProps(context) {
    const { slug, apiRoute } = context.query;

    let apiMethod = wp.posts();

    switch (apiRoute) {
      case 'category':
        apiMethod = wp.categories();
        break;
      case 'page':
        apiMethod = wp.pages();
        break;
      default:
        break;

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import DocumentTitle from 'react-document-title'
import Wpapi from 'wpapi'

const WP_PARAMETERS = global.WP_PARAMETERS
const wp = new Wpapi({ endpoint: WP_PARAMETERS.API })

class PostsDetail extends React.Component {

  constructor () {
    super()
    this.state = {
      title: '',
      content: ''
    }
  }

  render () {
    return (
      
        <main>
          </main>

import React, { Component } from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { Link } from 'react-router'
import DocumentTitle from 'react-document-title'
import Wpapi from 'wpapi'

const WP_PARAMETERS = global.WP_PARAMETERS
const wp = new Wpapi({ endpoint: WP_PARAMETERS.API })

class Posts extends Component {
  constructor () {
    super()
    this.state = {
      title: 'Posts List',
      data: []
    }
  }

  componentDidMount (pageNum = 1) {
    wp.posts().page(pageNum).perPage(WP_PARAMETERS.POSTS_PER_PAGE).embed().then((res) => {
      this.setState({
        data: res
      })
    }).catch((err) => {

import {
  REQUEST_API,
  RECEIVE_ARCHIVES,
  RECEIVE_PAGE,
  WP_API,
  WP_POSTS_PER_PAGE,
  WP_PAGE_ON_FRONT
} from '../constants'

import Wpapi from 'wpapi'
const wp = new Wpapi({ endpoint: WP_API })

function requestApi (loading) {
  return {
    type: REQUEST_API,
    payload: {
      loading: loading
    }
  }
}

function receiveArchive (pageNum, totalPages, posts) {
  return {
    type: RECEIVE_ARCHIVES,
    payload: {
      pageNum: pageNum,
      totalPages: totalPages,