Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including wordpress-query-posts with all npm packages installed. Try it out:

var wordpressQueryPosts = require("wordpress-query-posts")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

wordpress-query-posts v1.1.2

A component for fetching WordPress post data from the REST API.

WordPress Query Posts

This package contains a query component, along with redux state & selectors for posts pulled from a WordPress site. This uses the node-wpapi package to get your site's data via Query Components (inspired by calypso). The Query Components call the API, which via actions set your site's data into the state.

To use any of these helpers, you'll need to set your Site URL in a global (SiteSettings), so that the API knows what site to connect to. For example:

window.SiteSettings = {
    endpoint: '',

As of version 1.1, the URL should not include /wp_jsonwordpress-rest-api-oauth-1 adds that for us.

Query Posts

Query Posts is a React component used in managing the fetching of posts queries, or single posts by the post slug.


Used to request a single post, or list of posts, based on either a query object, or post slug.

Render the component, passing in the query or a single postSlug. It does not accept any children, nor does it render any elements to the page. You can use it adjacent to other sibling components which make use of the fetched data made available through the global application state.

import React from 'react';
import QueryPosts from 'wordpress-query-posts';
import MyPostsListItem from './list-item';

export default function MyPostsList( { posts } ) {
    return (
            <QueryPosts query={ { search: 'Themes' } } />
            { ( post ) => {
                return (
                        key={ }
                        post={ post } />
            } }

or for a single post:

import React from 'react';
import QueryPosts from 'wordpress-query-posts';
import SinglePost from './single';

export default function MyPostsList( { post } ) {
    return (
            <QueryPosts postSlug="local-development-for-wordcamp-websites" />
            <SinglePost post={ post } />




The query to be used in requesting posts.



The post slug of the post to request.

Post Selectors

You can import these into your project by grabbing them from the selectors file:

import { getPost, isRequestingPost } from 'wordpress-query-posts/lib/selectors';

getPost( state, globalId )

getPostsForQuery( state, query )

isRequestingPostsForQuery( state, query )

getTotalPagesForQuery( state, query )

isRequestingPost( state, postSlug )

getPostIdFromSlug( state, slug )

Post State

If you need access to the reducers, action types, or action creators, you can import these from the state file. For example, to use this in your global redux state, mix it into your reducer tree like this:

import posts from 'wordpress-query-posts/lib/state';

let reducer = combineReducers( { ...otherReducers, posts } );

If you need to call an action (the query component should take care of this most of the time), you can pull the action out specifically:

import { requestPost } from 'wordpress-query-posts/lib/state';

View the file itself to see what else is available.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free