Core logic for fetching data from WP api
npm install @hmn/wp-dataproviderCore logic for fetching data from WP API.
#### Installation
``
npm install @hmn/wp-dataprovider --save
#### Importing
`js`
import { DataProviderConfig, ListingController, SingleItemController } from '@hmn/wp-dataprovider'
#### Setting URL of a WP based page
Make sure to wrap root of your app with DataProviderConfig.
`js`
const App = () => {
return (
)
}
#### Example of fetching data for a post
`js`
const SinglePost = () => {
return (
{({ data, ...rest }) =>
{item.title.rendered}
}
)
}
#### Example of fetching data for a listing
`js`
const PostsListing = () => {
const [perPage, setPerPage] = useState('10')
return (
{({ data, ...rest }) => (
{data.map(item => (
{item.title.rendered}
))}
)}
)
}
#### Example of using with Next.js return posts.map(item => (
`js
const Components = ({ singlePost, ssrPosts }) => {
return (
{singlePost.title.rendered}
{({ data, ...rest }) => {
const posts = data.length ? data : ssrPosts
{item.title.rendered}
))
}}
)
}
Components.getInitialProps = async () => {
const singlePost = await BackendService.fetch('posts', { id: 5215 })
const { items } = await BackendService.fetch('posts', {})
return {
singlePost,
ssrPosts: items || [],
namespacesRequired: ['common']
}
}
`
`js
const About = ({ data }) => {item.title.rendered}
const ControlledComponent = ({ ssrData, ...props }) => {
{({ data = ssrData, ...controllerProps }) => (
)}
}
ControlledComponent.getInitialProps = async () => {
const post = await BackendService.fetch('posts', {id: 5215} )
return {
ssrData: post,
namespacesRequired: [common, navigation]
}
}
`Pagination support
Two ways of pagination are built in: numbered pagination and infinite scroll / load more type.
#### Using infinite scroll / load more (default)
`js`
{({ onLoadMore, ...rest }) => (
<>
{data.map(item => (
{item.title.rendered}
))}
)}
#### Using numeric pagination (add .Pagination)
`js`
perPage,
search
}}
resource="posts">
{({ onPrev, onNext, onPage, ...rest }) => (
<>
{data.map(item => (
{item.title.rendered}
))}
)}
#### Example of refetching data manually
`js`
const PostsListing = () => {
const [perPage, setPerPage] = useState('10')
return (
{({ data, refetch, ...rest }) => (
{data.map(item => (
{item.title.rendered}
))}
)}
)
}
Currently supported resources (endpoints):
- posts
- media
- pages
- users
- tags
- categories
- menus
For Custom Post Types set customs like this:
`js
const customs = {
speakers: 'posts',
awards: 'posts',
news: 'posts'
}
BackendService.customTypes = customs
`
Each package is available from main export. Check index.js for structure.
For further development of package follow setup:
Clone package.
`
npm install
`
npm run watch
Auto builds on each change to /lib folder.
Increment version.
`
npm version
`
npm run build
npm pack
npm publish