Adding new custom post endpoint handler

toby · 18 July 2019 17:27

Hi there,

Frontity looks like a really compelling solution; thank you so much. I am keen to give it a go.

I am trying to add lists and post endpoints for a new custom post type, and I found this handler for a product post type in the documentation: https://docs.frontity.org/api-reference-1/wordpress-source#example-1

I placed this code block in mars-theme/src/index.js within the mars-theme’s before constant, so it is called in the beforeSSR action. Unfortunately, when loading the new products endpoint, I see a 404 error in the browser and in the terminal this error:

TypeError: Cannot destructure property id of ‘undefined’ or ‘null’.
at attachmentHandler (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/attachment.ts:4:129)
at processTicksAndRejections (internal/process/task_queues.js:85:5)
at Object.postType [as func] (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:5:262)
at eval (webpack-internal:///./node_modules/@frontity/wp-source/src/actions.ts:13:100)

I have been able to get a small Create React App to list these CPTs no problem, so I know the REST API is open, and can see the JSON, but would love to better understand how Frontity works to get this working. Any help or tips hugely appreciated.

Cheers,
Toby

David · 19 July 2019 09:34

Hi @toby, and welcome!

I see the error occurs inside the attachment handler. This means that you may have tried to fetch a link that doesn’t match the pattern of the product handler (/product/:slug), or for some reason the product handler hasn’t been added to libraries.source.handlers.

What’s the content of window.frontity.libraries.source.handlers in the browser?

toby · 19 July 2019 16:23

Hi @David, thanks for responding. I can see the “product” handler is there:

But there’s still nothing found in the browser, just 404.

If I get http://wp.local/wp-json/wp/v2/product in Postman I can see the products listed in a json file

toby · 19 July 2019 17:03

When I enter a slug for a product that exists, the website shows “Internal Server Error”

1 GET http://localhost:3000/product/pig-fiddle/ 500 (Internal Server Error)

David · 19 July 2019 17:51

Ok, that means some error happenend while running the product handler (but at least it was executed).

The problem could be the endpoint used when calling libraries.source.api.get inside the handler. That endpoint should match the endpoint of your WP REST API, and in your case it seems to be product instead of products (the value we set in the example).

Try changing that value and tell me if it works!

toby · 20 July 2019 13:41

Hi @David, thanks yes I had already changed the endpoint value to singular product. Before then, when using the value as in the example, it was always returning 404. The 500 internal server error at least shows something is catching – but it’s not clear what is going on. At least to me it’s not

luisherranz · 20 July 2019 15:52

Could you please share the code of your handler? Also, how are you dealing with it in your theme? Using something like data.isProduct? Or maybe put the whole repo in GitHub so we can take a look here

Oh, and handlers give you more flexibility, but support for custom post types and taxonomies with a simple wp-source setting is almost finished, I think. Right @david?

By the way, here you have an example of two handlers working fine:

github.com

annabranco/three-bunnies/blob/master/packages/three-bunnies-theme/src/utils/handlers.js

export const players = {
  priority: 8,
  pattern: "/players/",
  func: async ({ route, params, state, libraries }) => {
    // 1. get all pages with parent "players".
    const playersList = await libraries.source.api.get({
      endpoint: "pages",
      params: { parent: 48 }
    });

    // 1. get "players" page itself.
    const playersPage = await libraries.source.api.get({
      endpoint: "pages",
      params: { include: 48 }
    });

    // 2. add everything to the state.
    const items = await libraries.source.populate({
      response: playersList,
      state

This file has been truncated. show original

lincolnlemos · 4 September 2019 20:41

@luisherranz

I tried to add my handler using the ref at docs .

At the line 20/21, we have:

  isPostType: true,
  isProduct: true

I did the same thing for my handler, but I get an error. Looking at my network console, I see that frontity was looking at my rest-api-url/post?slug=dummy instead of rest-api-url/product?slug=dummy.

As “Product” is also a “PostType”, why this is happening?

luisherranz · 5 September 2019 08:53

The endpoint is defined in the libraries.source.api.get call:

const response = await libraries.source.api.get({
  endpoint: "products", // <- this is the endpoint Frontity tries to reach.
  params: { slug: params.slug }
});

If the "endpoint" value doesn’t start wih "/", it will add "/wp/v2" first:

"products": https://domain.com/wp-json/wp/v2/products
"/products": https://domain.com/wp-json/products

Let me know if that solves the problem.

lincolnlemos · 5 September 2019 13:26

My error was coming from the place that I was adding the handler function.

I was adding at the beforeSSR/beforeCSR action. It worked after I change the code for the init action.

Looks like is a common error as we have the same questions at the How to create Custom Pages?

Create custom pages and CPT’s are the main work from a lot of WP developers. I believe it’s very important to make this super clear at the docs. I struggled to create my custom page and add my CPT route at frontity. I believe that will be cool to have some CPT/CustomPage example code at the mars-theme.

What do you think guys?

lincolnlemos · 5 September 2019 14:13

@luisherranz
I uploaded my code at https://github.com/lincolnlemos/frontity
Can you check if is something wrong?

I struggling to get the whole data from the CPT endpoint.
I can see only this at frontity.state.source

I’m also having CORS issues. Any help with this? Sorry, I’m new to React.

luisherranz · 7 September 2019 12:38

Absolutely. I’ve added it to our documentation roadmap.

We’ll have that functionality in our PHP plugin but until we release it, you can use this other plugin: https://github.com/ahmadawais/WP-REST-Allow-All-CORS

Your code is fine. The handler is perfect.

Be aware that your CPT doesn’t have a content property. If you use <Post>, you’d have to make that conditional:

<Body>
  {post.content && <libraries.html2react.Component html={post.content.rendered} />}
</Body>

But there’s a bug right now with CPT population. We have already fixed and it’s merged and it’s ready to be released.

We hope to release a new version on Monday, with this fix. Once that’s ready, you should be able to see your CPTs.

I’ve just tested your code with the fix and it works fine with ACF as well: