Do the hooks support recursion?

[MichaelAllenWarner]

I have WPGraphQL Gutenberg installed on the WordPress side, and I'm trying to use the client.usePage() hook to get all the block-data for a page. I want SSG-only fetching (no client-side).

Each block may have an array of innerBlocks, and each element of that array may have an innerBlocks array in turn, ad infinitum. To get GQty to return something other than a Proxy for each innerBlocks array, I have to actually traverse each one. At the moment I'm doing something recursive like this:

// ...

type ReturnedBlock = {
  name: string;
  attributesJSON?: string;
  innerBlocks?: ReturnedBlock[];
};

const getBlocks = (blocks: Block[]): ReturnedBlock[] =>
  blocks.flatMap((block) => {
    if (!block) return [];

    const { name, attributesJSON, innerBlocks } = block;
    if (!name) return [];

    return {
      name,
      ...(attributesJSON ? { attributesJSON } : {}),
      ...(innerBlocks ? { innerBlocks: getBlocks(innerBlocks) } : {}),
    };
  });

export default function Page() {
  const { usePage } = client;
  const page = usePage();

  const blocks = getBlocks(page?.blocks || []);
  console.log({ blocks });

  return <PageComponent page={page} />;
}

export async function getStaticProps(context: GetStaticPropsContext) {
  return getNextStaticProps(context, {
    Page,
    client,
    notFound: await is404(context, { client }),
  });
}

// ...

This "works," but it seems to be causing a bunch of re-renders of the Page component in the browser (the dev-tools Profiler attributes it to "hook 3," which I think might be something internal to Faust in this case; not sure). As long as that recursive getBlocks(innerBlocks) call is there, the console.log({ blocks }) is firing many times in the browser console when I change route.

Has anyone encountered this sort of problem before? Does recursion with usePage() data seem like a reasonable approach here, or would I be better off fetching recursively directly in getStaticProps()?

[theodesp]

Hey @MichaelAllenWarner thank you for your query. This is a known problem with recursive children and GraphQL in general which is unfortunate becuase GQty doesn't make it easier because you cannot use a custom query.

https://stackoverflow.com/questions/44746923/how-to-model-recursive-data-structures-in-graphql

The same issue happens with menus where you have a hierarchy of menu items and each menu can have sub-menus etc. Currently WPGraphQL offers a way to query those using parentIDs (See image bellow)

I recon the same idea can be used for innerBlocks where you have a parent block id to refer to. We plan to have future iterations in order to unlock this within WPGraphQL however currently you can only request the inner blocks as children.

Also GQty suffers with this issue here which makes it difficult to have SSR all the way through without having to do a lot of CSRs (and that is why we are developing the next version of Faust using Apollo).

If I were you I would try to use a maximum depth within the recursive getBlocks or even better try to use prepass and selectFields to use fewer queries in the end.