Wp source params not working as expected

koli14 · 17 February 2020 16:00

I want to fetch the posts and pages by menu_order, so I added this snippet to my functions.php file:

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;
}

But I don’t want it to my Quotes Custom Post Type (CPT).
My frontity.settings.js looks like:

const settings = {
  ...
  packages: [
    ...
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://mysite.com/wp-json",
          params: {
            orderby: "menu_order",
            order: "asc",
            per_page: "99"
          },
          homepage: "/home",
          postsPage: "/news",
          postTypes: [
            {
              type: "quote",
              endpoint: "quote",
              archive: "/quote",
              params: {
                orderby: "date",
                per_page: "7"
              }
            }
          ],
          taxonomies: [
            {
              taxonomy: "folder",
              endpoint: "folder"
            }
          ]
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;

I expected this to work, but it does not. Frontity can not fetch my Quote CPT, as it gets REST API error. If I remove orderby: "menu_order", it’s working as expected. I am doing something wrong, or it’s a bug?
Thanks!

mmczaplinski · 17 February 2020 18:50

Hi @koli14!

Sounds like it might be a bug in frontity! We’re investigating on our end, but in the meantime could you:

Post the error message that you receive.
Check if the same error occurs if you add the query parameter directly to the url in api like: https://mysite.com/wp-json?order_by=menu_order and remove the orderby: "menu_order", from params.

Thanks!

koli14 · 18 February 2020 09:25

Thanks @mmczaplinski! Here is the Error message, I get in the browser console:

TypeError: "_ref6 is undefined"
    node_modules populate.ts:14
    node_modules populate.ts:14
    node_modules populate.ts:5
    node_modules populate.ts:5
    node_modules scheduler.js:7
    batchedUpdates$1 React
    node_modules scheduler.js:7
    node_modules scheduler.js:10
    node_modules scheduler.js:11
    node_modules populate.ts:5
    node_modules populate.ts:5
    node_modules populate.ts:5
    node_modules populate.ts:5
    node_modules populate.ts:14
    node_modules postTypeArchive.ts:5
    node_modules postTypeArchive.ts:3
    node_modules postTypeArchive.ts:3
    node_modules scheduler.js:7
    batchedUpdates$1 React
    node_modules scheduler.js:7
    node_modules scheduler.js:10
    node_modules scheduler.js:11
    node_modules postTypeArchive.ts:3
    node_modules postTypeArchive.ts:3
    node_modules postTypeArchive.ts:3
    node_modules postTypeArchive.ts:3
    node_modules postTypeArchive.ts:7
    node_modules actions.ts:12
    node_modules actions.ts:6
    node_modules actions.ts:6
    node_modules actions.ts:6
    node_modules actions.ts:6
    node_modules actions.ts:15
    node_modules create-store.js:4
    Theme index.js:29
    React 3
        commitHookEffectList
        commitPassiveHookEffects
        callCallback
    node_modules scheduler.js:7
    batchedUpdates$1 React
    node_modules scheduler.js:7
    node_modules scheduler.js:10
    React 3
        invokeGuardedCallbackDev
        invokeGuardedCallback
        flushPassiveEffectsImpl
    unstable_runWithPriority scheduler.development.js:697
    React 3
        runWithPriority$2
        flushPassiveEffects
        performSyncWorkOnRoot
actions.ts:56:14

On the CLI there is no error.

If I do not use the Quote CPT, then it’s working as expected.
I do not really understand your second question.
If I use globally e.g. orderby: author, and on my Quote CPT orderby: date, then my code is working, but the Quotes will be ordered by author and not by date. (as Quote can be ordered by author). So I get the error only because Quote can not be ordered by menu_order (which I do not want anyway…).

mmczaplinski · 18 February 2020 22:51

Hey @koli14!

It seems like this is an error in WordPress, not in Frontity.

You are using a filter to add menu_order but it will work only for posts, because you’re using rest_post_collection_params .

The definition for that filter is rest_{$this->post_type}_collection_params .
https://developer.wordpress.org/reference/hooks/rest_this-post_type_collection_params/

rest_post_collection_params only affects posts. To affect the post type quote, you would need to use rest_quote_collection_params as well.

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

koli14 · 20 February 2020 09:20

Hey @mmczaplinski!
Yes, I’m aware of that. As I wrote, I do not want to order the quotes by menu_oder but by date.
But here is an other example where the bug is visible, without menu_order:
I write following into my frontity.settings.js to set the order globally to slug, but the Quote to date:

const settings = {
...
  packages: [
    ...
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://mysite.com/wp-json",
          params: {
            orderby: "slug",
            order: "asc",
            per_page: "99"
          },
          homepage: "/home",
          postsPage: "/news",
          postTypes: [
            {
              type: "quote",
              endpoint: "quote",
              archive: "/quote",
              params: {
                orderby: "date",
                order: "asc",
                per_page: "7"
              }
            }
          ]
        }
      }
    },
    ...
  ]
};

export default settings;

Then in the /packages/frontity-chakra-theme/src/components/index.js file:

React.useEffect(() => {
    if (state.router.link === "/") {
      actions.source.fetch("/quote");
    }
  }, [state.router.link]);

And in my home.js:

const quotesData = state.source.get("/quote");

Then the quotes should be ordered by date (or I expect that, but maybe I’m wrong), but they are ordered by slug.

mmczaplinski · 20 February 2020 20:20

Hey @koli14!

I think I misunderstood your original problem

What you are trying to achieve is currently not possible with Frontity, unfortunately. We do not support the params inside of postTypes at the moment, although I admit that it was reasonable on your part to expect it to work this way!

I have opened a new feature request for this so that you can see what the status of it is in the future!

koli14 · 21 February 2020 09:03

Thanks @mmczaplinski!
This example from the docs is what confused me:

taxonomies: [
  {
    taxonomy: "actors",
    endpoint: "actor",
    postTypeEndpoint: "movies",
    params: {
      per_page: 5,
      _embed: true
    }
  }
]

But than its working just for Taxonomies, and not for CPT’s.

luisherranz · 25 February 2020 21:31

I didn’t know we had that for taxonomies but not for post types. Maybe this is bug?

@David could you please check it out?

luisherranz · 25 February 2020 21:33

Oh, I see you already answered in the Feature Discussion. Sorry

myduiattorney127 · 11 January 2023 06:24

I will Add this code frontity.settings.js, but not working. Please Help. Thanks
“params”: {
per_page: 9,
type: [“post”, “team”, “page”],
},
“params”: {
per_page: 20,
order: ‘desc’,
type: [‘attorneytestimonials’]
},