Graphql (does not) feels nice to use, or am I just a noob?

Context

Recently for $dayJob I started revamping the company website; the existing website was mainly Wordpress using Beaver Builder on the frontend, I had briefly worked with Wordpress, Xampp (Lampp?), with MySql when I started out in tech. I haven’t revisited it since then but I had always like the niceities of CMSes especially for allowing “Non-technical” people update content.

More Context

So off I went, I intially started the website revamp by exploring Laravel (something I had wanted to come back to and try out for a production project), with laravel it was nice, my only issue was having to get the management to pay for another cloud/”tech” service again; we are a small company so every penny counts so after doing intial frontend exploration along with using ACF-JSON I collected all the UI I liked (which was pretty much everything) and decided to use Wordpress Themes.

I have to say I didn’t particularly enjoy wordpress themes, I just couldn’t get myself to sit and learn it, it felt like a lot of things and I wanted to move mast, so I went back to something familiar, Astro.

Graphql: The setup

This is the second production site I am building with Astro; it is a Javascript framework™ but it feels simple and straightforward at least to me.

For this I already had a starting point for UI based on the Laravel I built previously, so I wanted a nicer way to connect to wordpress. I did a little more research. I found WP-Graphql; I hadn’t used Graphql previously so I read the whole docs on one of my morning commutes and I got very interested. I started testing the possibilities with this based on the ACF Pro setup I had on wordpress for content, for that I needed to install

  1. WPGraphql
  2. WPGrahql for ACF

I was off to the races, I did a lot of testing using Yaak just to figure out querying and such; and I must say, using Graphql feels nice, well…when it works, but it is nice! It feels very UI focused from my usage so far. I will talk about some issues I faced so far especially in reference to my setup: Astro, Headless Wordpress, Cloudflare Workers.

With exciting technology; comes undocumented problems

Well, it felt nice doesn’t mean it didn’t cause me 1000 years of pain; I think this has also been an observation for me in the past few weeks of working on stuff, it feels harder to find answers, even using AI, it feels like I used to be able to find answers easier. I also find it the case for some plugins and such I have had to use in the wordpress ecosystem to extend, then again I am a wordpress nooob.

Next, I want to explore a few issues and solutions that worked for me hopefully it works out well for someone out there.

Deploying Astro + React 19 to Cloudflare Workers

You might come across this error when deploying to workers especially when you have output: 'server' in your astro config.

If you come across this MessageChannel error:

13:30:35.332 Uncaught ReferenceError: MessageChannel is not defined13:30:35.332 at null.<anonymous>
(file:///opt/buildhome/repo/dist/_worker.js/renderers.mjs:6804:16) in requireReactDomServer_browser_production13:30:35.332 at null.<anonymous>
(file:///opt/buildhome/repo/dist/_worker.js/renderers.mjs:13074:8) in requireServer_browser13:30:35.332 at null.<anonymous>
(file:///opt/buildhome/repo/dist/_worker.js/renderers.mjs:13086:29) in dist/_worker.js/renderers.mjs13:30:35.332 at null.<anonymous> (index.js:15:56) in
__init13:30:35.332 at null.<anonymous> (file:///opt/buildhome/repo/dist/_worker.js/index.js:2:1)13:30:35.332 [code: 10021]

Explore this as a solution:

const isProduction = process.env.NODE_ENV === 'production';
const isCloudflare = process.env.CLOUDFLARE_ENV === 'true' || isProduction;

export default defineConfig({
  // ... other config
  vite: {
    ...(isCloudflare && {
      resolve: {
        alias: {
          // Only use edge server for Cloudflare production builds
          'react-dom/server': 'react-dom/server.edge',
          'react-dom/server.browser': 'react-dom/server.edge'
        }
      },
      define: {
        // Polyfill MessageChannel only for Cloudflare
        'globalThis.MessageChannel': 'undefined',
        'global.MessageChannel': 'undefined'
      }
    })
  }
});

What causes the error

I have included some linked I came across regarding the issue as well: