Cách gọi đến APIs của WordPress với React/Next.js

Tổng quan

Trong bài viết này mình sẽ hướng dẫn cách gọi đến APIs của WordPress blog với React/Next.js. Để làm được điều này, mình sẽ sử dụng thư viện axios để gọi đến APIs của WordPress.

Sau khi cài đặt axios, chúng ta cần tạo một service để gọi đến APIs đó và sau đó sử dụng service đó trong component của chúng ta.

Cài đặt axios

Đầu tiên, chúng ta cần cài đặt axios bằng cách chạy lệnh sau:

npm install axios

Tạo service

Tiếp theo, chúng ta cần tạo một service để gọi đến APIs của WordPress. Dưới đây là một ví dụ về service:

import axios from 'axios';

export class AppService {
    public async getBlogs(): Promise<any> {
		const getBlogs = "https://[your-wordpress-site]/wp-json/wp/v2/posts?per_page=100";
		const res = await axios.get(getBlogs);
		return res.data
	}
}

Gọi service trong component

Cuối cùng, chúng ta sử dụng service trong component của chúng ta. Dưới đây là một ví dụ về cách sử dụng service trong component:

// blog.tsx
import { AppService } from "@/services/AppService";
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
const Blogs = () => {
	const router = useRouter()
    const [blogs, setBlogs] = useState<any>([])
    useEffect(() => {
		if (router.isReady) {
            const appService = new AppService().getBlogs()
            appService.then((res) => {
                setBlog(res)
            })
        }
	}, [router.isReady]);

	return (
		<>
		{blogs.map((blog: any, index: any) => (

            <div key={index}>
                <div>
                    <h2>{blog.title.rendered}</h2>
                    <div dangerouslySetInnerHTML={{ __html: blog.content.rendered }} />
                </div>
            </div>

        ))}
		</>
	);
};
export default Blogs;

Trong ví dụ trên, chúng ta đã sử dụng service để gọi đến APIs của WordPress và sau đó hiển thị dữ liệu trả về trong component và lưu trữ dữ liệu trong state blogs.