Query for WordPress generated CSS variables in Astro

The example below shows how to query for CSS variables within the homepage of your Astro project.

// .env
WPGRAPHQL_URL="http://my-site.local/graphql"
// src/pages/index.astro
---
const response = await fetch(`${import.meta.env.WPGRAPHQL_URL}`, {
  method: "POST",
  headers: {
    "content-type": "application/json"
  },
  body: JSON.stringify({
    query: `
      query PageData {
        cssVariables
      }
    `
  })
});
const { data: { cssVariables } } = await response.json();
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Homepage</title>
    {!!cssVariables && <style set:html={`:root{${cssVariables}}`} />}
  </head>
</html>

Once the WordPress generated CSS variables have been queried, the page data can be queried.

Back
Next steps
 Next
Page data