Custom REST API Integration: Fetching Data in React

Previously in this course, we explored Block API v2 Essentials to structure our blocks and State Management with @wordpress/data to handle complex application state. While those lessons covered how to architect data flow, this lesson focuses on the "plumbing"—the actual network layer—required to pull data from your custom REST API endpoints into your React-based interfaces.

When building a robust Knowledge Base plugin, you cannot rely solely on static attributes. You need to fetch live data (like related articles or category counts) directly from your custom endpoints. Doing this poorly leads to "flickering" UI, broken requests, and a frustrated admin experience.

First Principles: The Request Lifecycle

In a WordPress React environment, fetching data isn't just about calling fetch(). It is about managing a state machine. Every request exists in one of three states: Idle/Loading, Success, or Error.

If you ignore these states, your UI will feel unresponsive or, worse, crash when a server-side validation check fails. As we discussed in Secure REST API Endpoints, your API will return specific error codes; your React component must be prepared to catch and display those gracefully.

The Implementation: A Data-Fetching Hook

Instead of cluttering your components with useEffect logic, we encapsulate the fetching logic in a custom hook. This makes our code testable and reusable across different blocks in our Knowledge Base plugin.

We will use the @wordpress/api-fetch package, which is the standard wrapper for fetch in WordPress. It automatically handles authentication (nonces) and JSON parsing.

JAVASCRIPT
import { useState, useEffect } from CE9178">'@wordpress/element';
import apiFetch from CE9178">'@wordpress/api-fetch';

/**
 * Custom hook for fetching Knowledge Base articles.
 */
export const useKBArticles = (category) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        let isMounted = true;
        setLoading(true);

        apiFetch({ path: CE9178">`/kb/v1/articles?category=${category}` })
            .then((response) => {
                if (isMounted) {
                    setData(response);
                    setLoading(false);
                }
            })
            .catch((err) => {
                if (isMounted) {
                    setError(err.message || CE9178">'An unexpected error occurred.');
                    setLoading(false);
                }
            });

        return () => { isMounted = false; };
    }, [category]);

    return { data, loading, error };
};

Integrating into the UI

Now, let's use this hook within our block's Edit component. We need to handle the three states we identified:

JSX
export default function Edit({ attributes, setAttributes }) {
    const { category } = attributes;
    const { data, loading, error } = useKBArticles(category);

    if (loading) return <p>Loading articles...</p>;
    if (error) return <p className="kb-error">Error: {error}</p>;

    return (
        <ul>
            {data.map(article => (
                <li key={article.id}>{article.title}</li>
            ))}
        </ul>
    );
}

Hands-On Exercise

Your task is to extend the Knowledge Base plugin's "Article List" block.

1. Create a new useKBArticles hook in your project's src/hooks directory.
2. Implement the apiFetch logic shown above.
3. Update your Edit.js file to display an error notification using the @wordpress/components Notice component when an API error occurs.
4. Verify that your path matches the registered REST route from your plugin's PHP service provider.

Common Pitfalls

• Race Conditions: Notice the isMounted flag in the example. If a user changes the category rapidly, multiple requests might fire. Without this check, an older, slower request might overwrite the results of a newer, faster one.
• Ignoring Nonces: Always use apiFetch instead of the browser's native fetch. apiFetch automatically appends the X-WP-Nonce header, which is essential for any write-based operations (POST/PUT/DELETE).
• Hardcoding URLs: Never hardcode the REST API root. If you need to construct URLs manually, use the _wpApiSettings global variable (usually passed via Localizing Data for JavaScript in WordPress Plugins) to ensure your plugin works on installations using subdirectories or custom permalink structures.

Recap

Effective REST API integration requires treating your UI as a state machine. By utilizing custom hooks, you encapsulate the complexity of the request lifecycle, ensuring that loading states are communicated and errors are caught before they impact the user. Always leverage apiFetch to maintain security and compatibility with the WordPress ecosystem.

Up next: We will dive into Optimizing React Rendering, where we'll use useMemo and useCallback to ensure our data-heavy Knowledge Base components remain performant as the number of articles grows.