Adding new custom post endpoint handler

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

2 Likes

Hi @toby, and welcome! :wave:

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?

2 Likes

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

1 Like

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)

1 Like

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!

1 Like

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 :confused:

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 :slight_smile:

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:

1 Like

@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?

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.

1 Like

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?

@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.

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: