App router example with block support - already possible?

[pshemek]

I'm trying to "merge" app-router and block-support Next.js examples in a new app.

Let's use as an example a custom implementation of core paragraph block:

import { gql } from '@apollo/client';
import { useBlocksTheme } from '@faustwp/blocks';

export default function CoreParagraph(props) {
  const attributes = props.attributes;
  return <p dangerouslySetInnerHTML={{ __html: attributes.content }}></p>;
}

CoreParagraph.fragments = {
  entry: gql`
    fragment CoreParagraphFragment on CoreParagraph {
      attributes {
        content
      }
    }
  `,
  key: `CoreParagraphFragment`,
};


CoreParagraph.displayName = 'CoreParagraph';

It works until I try to use client-side hook like useBlocksTheme.
When I import it into the block component, I'm getting prompted about marking component as client-side.

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

OK, let's mark it with 'use client' directive.
But then, the block component becomes undefined in my server-side page.tsx GraphQL query:

Error: Cannot read properties of undefined (reading 'key')

...
editorBlocks {
  apiVersion
  blockEditorCategoryName
  clientId
  name
  parentClientId
  renderedHtml
  ...${blocks.CoreParagraph.fragments.key}
}
...

Is this already possible to have app router together full block support in Faust.js in its current state?

Thanks.

[blakewilson]

Hi @pshemek,

Thanks for your question. Right now our other faust packages (core, cli, blocks, etc.) are not prepped and ready for Next.js 13' App Router. This is why you are seeing these "use client" errors.

We've created a ticket in our internal backlog to resolve this. I'll respond back here once we've implemented it!