I am currently using Rank math as an SEO plugin and installed Rank math extension for WPGraphql. I need to update the domain for the JsonLd data which I’ve successfully done using Rank math filter (

rank_math/json_ld

) to modify the domain to another one. However when I check the Query on Query Composer it keeps showing the old domain. Is there something I need to update from WPGraphql in order to use this updated domain?

query Taxonomy {
  taxonomies {
    nodes {
      description
      id
      name
      label
      public
    }
  }
}

// returns the following when TaxoPress is enabled:
{
  "data": {
    "taxonomies": {
      "nodes": [
        {
          "description": "",
          "id": "dGF4b25vbXk6Y2F0ZWdvcnk=",
          "name": "category",
          "label": null,
          "public": null
        },
        {
          "description": "",
          "id": "dGF4b25vbXk6cG9zdF90YWc=",
          "name": "post_tag",
          "label": null,
          "public": null
        },
        {
          "description": "",
          "id": "dGF4b25vbXk6cG9zdF9mb3JtYXQ=",
          "name": "post_format",
          "label": null,
          "public": null
        }
      ]
    }
  },
}

However you can expose the taxonomy by registering it to show in GraphQL. This may be good to add to the plugin documentation for others:

function register_media_tag_graphql()
{
	register_taxonomy('media_tag', 'attachment', array(
		'show_in_graphql' => true,
		'graphql_single_name' => 'MediaTag',
		'graphql_plural_name' => 'MediaTags',
	));
}
add_action('init', 'register_media_tag_graphql');

Now I can query the tags from the taxoPress taxonomy:

query MediaTags {
  mediaTags {
    nodes {
      databaseId
      name
      slug
      taxonomyName
    }
  }
}

// returns:
{
  "data": {
    "mediaTags": {
      "nodes": [
        {
          "databaseId": 7,
          "name": "los angeles",
          "slug": "los-angeles",
          "taxonomyName": "media_tag"
        },
        {
          "databaseId": 6,
          "name": "toronto",
          "slug": "toronto",
          "taxonomyName": "media_tag"
        }
      ]
    }
  },
}

query GetPageData( $id: ID! $idType: PageIdType $asPreview: Boolean = false ) {
page(id: $id, idType: $idType, asPreview: $asPreview) {
title
content
testingAcf {
content
}
}
}

public static function wallet_post_type_args() {

        return apply_filters( 'hrw_wallet_post_type_args' , array(
            'labels'              => array(
                'name'          => esc_html__( 'All Wallet' , HRW_LOCALE ) ,
                'singular_name' => esc_html__( 'All Wallet' , HRW_LOCALE ) ,
                'all_items'     => esc_html__( 'All Wallet' , HRW_LOCALE ) ,
                'menu_name'     => esc_html_x( 'All Wallet' , 'Admin menu name' , HRW_LOCALE ) ,
                'add_new'       => esc_html__( 'Add Wallet' , HRW_LOCALE ) ,
                'add_new_item'  => esc_html__( 'Add New Wallet' , HRW_LOCALE ) ,
                'edit'          => esc_html__( 'Edit' , HRW_LOCALE ) ,
                'edit_item'     => esc_html__( 'Edit Wallet' , HRW_LOCALE ) ,
                'new_item'      => esc_html__( 'New Wallet' , HRW_LOCALE ) ,
                'view'          => esc_html__( 'View Wallet' , HRW_LOCALE ) ,
                'view_item'     => esc_html__( 'View Wallet' , HRW_LOCALE ) ,
                'view_items'    => esc_html__( 'View Wallet' , HRW_LOCALE ) ,
                'search_items'  => esc_html__( 'Search Users' , HRW_LOCALE ) ,
            ) ,
            'description'         => esc_html__( 'Here you can able to see list of Wallet' , HRW_LOCALE ) ,
            'public'              => true ,
            'show_ui'             => true ,
            'capability_type'     => 'post' ,
            'publicly_queryable'  => true ,
            'exclude_from_search' => false ,
            'hierarchical'        => false , // Hierarchical causes memory issues - WP loads all records!
            'show_in_nav_menus'   => true ,
            'show_in_menu'        => 'hrw_wallet' ,
            'menu_icon'           => HRW_PLUGIN_URL . '/assets/images/dash-icon.png' ,
            'supports'            => array('title', 'editor','custom-fields'),
            'show_in_rest' => true,
             'show_in_graphql' => true,
            'graphql_single_name' => 'hrwwallett',
            'graphql_plural_name' => 'hrwwalletts',
            'query_var'           => true ,
            'map_meta_cap'        => true ,
            // 'rewrite'             => false ,
            'capabilities'        => array(
                'create_posts' => 'do_not_allow' ,
            )
                )
                ) ;
    }

const query = `
  query allPosts($after: String = "", $before: String = "", $first: Int) {
    posts(first: $first, after: $after, before : $before) {
      edges {
        node {
          author {
            node {
              name
            }
          }
          id
          title
          date
          excerpt
          featuredImage {
            node {
              sourceUrl
              title
            }
          }
          uri
          slug
          categories {
            nodes {
              uri
              count
              databaseId
              id
              name
              parent {
                node {
                  uri
                  count
                  databaseId
                  id
                  name
                }
              }
            }
          }
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
        endCursor
        startCursor
      }
    }
  }`;

Can anyone lead me to any information that could help me on integrating Gutenberg blocks to my Headless frontend running on Vue? (Nuxt.js framework).

The problem is that I can’t apply any scripts to my rendered blocks that I output in the following way:

<Header :class="urlTeam"></Header>

<div v-html="data.content" />

<Footer></Footer>

All the Gutenberg blocks render here via WPGraphQL plugin (v-html=”data.content”) but I can’t access any Vue components inside.

So if I build a custom Gutenberg block and use Vue markup inside – it just won’t work, I can’t apply any JS scripts to the content rendered that way.

Nothing complex, I just need to be able to use a carousel functionality inside Gutenberg editor, and use on click method for some spoilers components.

Appreciate any help or tips that could help me in advance!