Gatsby: Gatsby + Wordpress - natural sort order?

[dylan-baskind]

Firstly want to say how much I'm loving building my site with Gatsby - it really is a dream combination of dynamic CMS land + all the benefits of a static build; very nice work.

I've got a question (or potentially an enhancement request, if there's no real answer) -

I'm using Wordpress as my backing CMS, and got everything working well - but then I went to reorder some posts (using a few of the drag-n-drop plugins WP has) and I've realised that the GraphQL data isn't coming back in the natural sort order with which posts appear in Wordpress admin.

In this case I don't want to order by date etc - I know I could add a numeric "sort_order" type field and sort on that - but that'll get pretty cumbersome, especially once you get into the hundreds of posts.

I was wondering if anyone has worked out how to leverage the sort order as it appears in the Wordpress admin panel?

[pieh]

Do you have menu_order field on post type avaialble in your graphql data? This is what wordpress uses for manual ordering (f.e. for pages) and if that ordering plugin uses that it might be already available.

[dylan-baskind]

Heya thanks for that - looks like "menu_order" is available on WP Pages in the graphql data - but not on Posts, or any other custom post types for that matter :(

PS: just for clarity in my question: I'm looking to replicate the order of the pages/posts/custom-posts as they appear in the main pane's listing (not the order on the left-hand side menu of the admin panel).

Any other thoughts/suggestions folks have had trying to retrieve natural sort order from Wordpress > gatsby-source-wordpress (graphql data) > gatsby?

[calcsam]

Have you seen / tried the workaround listed here?

https://core.trac.wordpress.org/ticket/39657

[dylan-baskind]

Heya @calcsam - thanks for the tip-off - I gave it a shot by adding to functions.php:

add_filter( 'rest_post_collection_params', 'my_prefix_add_rest_orderby_params', 10, 1 );

function my_prefix_add_rest_orderby_params( $params ) {
  $params['orderby']['enum'][] = 'menu_order';

  return $params;
 @}

And it looks like, while the JSON response from the WP-API is re-ordered as expected (i.e. after hitting an endpoint like /wp-json/wp/v2/posts for example) - when I try to use the menu_order field from the Graphiql interface, there still isn't a menu_order field available in GraphQL.

i.e. So once the data reaches Gatsby, the posts still aren't ordered as expected.

Does gatsby-source-wordpress perhaps need to know about the menu_order field?

[pieh]

if graphql data doesn't preserve order (this might be caused by already cached data), I would expose menu order for post type in wordpress:

function my_rest_api_init() {
  register_rest_field(
    array('post'), // add to these post types
    'menu_order', // name of field
    array(
      'get_callback' => function($post) {
        return intval($post->menu_order); // value of field
      }
    )
  );
}

add_action('rest_api_init', 'my_rest_api_init');

and then try to sort by menu_order in your gatsby graphql query

[dylan-baskind]

Heya @pieh - that helped me solved it! - Only tweak I made was in retrieving the value from the field.

So for any future Gatsby + Wordpress folks looking to solve this, you can get your natural sort order by adding the following to your functions.php in your theme:

function my_rest_api_init() {
  register_rest_field(
    array('post'), // add to these post types
    'menu_order', // name of field
    array(
      'get_callback' => function($post) {
        return get_post_field( 'menu_order', $post->ID);
      }
    )
  );
}

add_action('rest_api_init', 'my_rest_api_init');

^ This will expose the menu_order field in the GraphQL data which you can sort as expected.

<3 thanks all who helped on this one!

[lnikell]

And that's the version of the function to add menu order to all post types

function add_menu_order_api_init() {

  register_rest_field(
    get_post_types(), // add to these post types
    'menu_order', // name of field
    array(
      'get_callback' => function($post) {
        return get_post_field( 'menu_order', $post->ID);
      }
    )
  );
}

add_action('rest_api_init', 'add_menu_order_api_init');