Headless CMS for Preact

import { useState, useEffect } from 'preact/hooks';

const fetchData = async () => {
    const response = await fetch('https://api-<region>.hygraph.com/v2/<some hash>/master', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer YOUR_HYGRAPH_TOKEN' // Include your authorization token here
        },
        body: JSON.stringify({
            query: `YOUR_GRAPHQL_QUERY`
        }),
    });
    const json = await response.json();
    return json.data;
};

const DataFetchingComponent = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetchData().then(setData);
    }, []);

    if (!data) return <p>Loading...</p>;
    
    // You can now use the 'data' variable to render your UI
};

const DisplayDataComponent = ({ data }) => {
    // Assuming 'data' is an array of items
    return (
        <div>
            {data.map(item => (
                <div key={item.id}>
                    <h2>{item.title}</h2>
                    <p>{item.description}</p>
                </div>
            ))}
        </div>
    );
};

const App = () => {
    // Assuming you're passing the fetched data to this component
    const [fetchedData, setFetchedData] = useState(null);

    useEffect(() => {
        fetchData().then(data => setFetchedData(data));
    }, []);

    return (
        <div>
            {fetchedData ? <DisplayDataComponent data={fetchedData} /> : <p>Loading...</p>}
        </div>
    );
};