Using Nested Blocks With Custom Query Block

It is not possible to pass query parameters (data) to the component <InnerBlocks />. However, there is a work around. You can fetch and store data in a parent block and then create separate “child” blocks according to the attributes (data) you want to pass (title, featured image, etc.)

import { registerBlockType } from '@wordpress/blocks';
import { useEffect, useState } from '@wordpress/element';
import { Spinner, InnerBlocks } from '@wordpress/components';

registerBlockType('my-plugin/custom-api-fetch', {
    title: 'Custom API Fetch Block',
    icon: 'format-image',
    category: 'widgets',

    attributes: {
        fetchData: {
            type: 'array',
            default: [],
        },
    },

    edit: ({ attributes, setAttributes }) => {
        const { fetchData } = attributes;
        const [loading, setLoading] = useState(true);

        // Fetch posts automatically on block load
        useEffect(() => {
            const fetchPosts = async () => {
                try {
                    const response = await fetch(`https://yourwebsite.com/wp-json/wp/v2/posts?categories=1&_embed`);
                    const data = await response.json();
                    setAttributes({ fetchData: data });
                } catch (error) {
                    console.error('Fetch error:', error);
                } finally {
                    setLoading(false);
                }
            };

            fetchPosts();
        }, []);

        const template = fetchData.map(post => ([
            'my-plugin/custom-post', { title: post.title.rendered, imageUrl: post._embedded['wp:featuredmedia'][0].source_url, postId: post.id }
        ]));

        return (
            <div>
                {loading ? (
                    <Spinner />
                ) : (
                    fetchData.length > 0 ? (
                        <InnerBlocks template={template} />
                    ) : (
                        <p>No posts found.</p>
                    )
                )}
            </div>
        );
    },

    save: () => {
        return null; 
    },
});