Gatsby: Using GraphQL Query on Custom Post Type with Custom Taxonomy

Question

I am using Gatsby to deliver a front end to WordPress and querying data with GraphQL.

I have a post with a Custom Post Type and a Custom Taxonomy.

However when I query on the CPT, I can get the number of the Custom Taxonomy but no don't know how to retrieve the corresponding names.

Below is my query;

{
    wordpressWpPortfolio {
        title
        slug
        id
        portfolio_categories
    }
}

And this is what is returned;

{
    "data": {
        "wordpressWpPortfolio": {
            "title": "Test Portfolio 1",
            "slug": "test-portfolio-1",
            "id": "5caf7182-c9f5-53d9-94da-b49cfbdc6d7f",
            "portfolio_categories": [
                5
             ]
         }
     }
}

However, there are no other fields I can select in the GraphQL playground.

Below is my expected result;

{
    "data": {
        "wordpressWpPortfolio": {
            "title": "Test Portfolio 1",
            "slug": "test-portfolio-1",
            "id": "5caf7182-c9f5-53d9-94da-b49cfbdc6d7f",
            "portfolio_categories": [
                "id":5,
                "name":"portfolio category name"
            ]
        }
    }
}

Is there any way to "join" the rest end points?

What am I doing wrong and how can I fix It?

Can this be amended in WP with register_graphql_connection( $config )? — Nick Wild

Tonyeli Tay Tonyeli Tay · Accepted Answer · 2019-05-06T11:07:40

What you are looking for is a custom normalizer.

There is a great example on the gatsby-source-wordpress page which is quite similar to what you want to achieve.

Alternatively, you may want modify your CPT REST API to return both the category ID and name of the field using the register_rest_api() method provided you are comfortable with WordPress development.

Something like this:

register_rest_field(
    // Custom Post Type name
    'portfolio',
    // Name of field being added to your REST API response (portfolio_categories)
    'portfolio_categories',
    array(
        'get_callback' => function( $data ) {
            $category_terms = wp_get_post_terms(
                $data['id'],
                'portfolio_categories'
            );
            $portfolio_categories = array();
            foreach( $category_terms as $term ) {
                $portfolio_category_obj       = new StdClass();
                $portfolio_category_obj->ID   = $term->ID;
                $portfolio_category_obj->name = $term->name;
                array_push(
                    $portfolio_categories,
                    $portfolio_category_obj
                );
            }
            return $portfolio_categories;
        },
    )
);

This will add an extra field in your REST API to called portfolio_categories which returns an array so you can use the GraphQL as expected.

Remember to run gatsby develop afterwards so as to start/restart your development server.

Gatsby: Using GraphQL Query on Custom Post Type with Custom Taxonomy

2 Answers