loq24 / react-woocommerce

✨✨✨ An eCommerce template using TailWindCSS and NextJS Incremental Static Regeneration with WooCommerce's WooGraphQL and WP Headless CMS in the backend

Home Page:https://react-woocommerce.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question about redirects with headless Wordpress

renjogabro opened this issue · comments

Hi Lougie,
Thank you for sharing your work and a live demo! Beatiful work.
I had a somewhat related question, that I was hoping you could help me with or guide me in anyway.

I am trying to build a NextJS frontend with Wordpress and WooCommerce backend, and am opting to do so with the WooCommerce REST api. I noticed that you built this particular repository with WPGraphQl, but that you had an outdated version with REST api.

Thus far I have been following this playlist:
https://www.youtube.com/watch?v=YJj2edx0ZFs&list=PLD8nQCAhR3tSRwsvzRtogv9MFkEWo5d9c&index=10&ab_channel=ImranSayed-CodeytekAcademy

But I ran into a problem. When I update the Wordpress general settings (Wordpress -> Settings -> General) and set the Site Address URL (frontend) to localhost:3000, the permalinks seem to break.
When I try to fetch the WooCommerce data through REST api, I get the error message of 404/500.

It seems that Wordpress automatically redirects my attempts to fetch data from localhost/my-wordpress to localhost:3000/my-wordpress.
I had a similar issue trying to reach localhost/my-wordpress/wp-json (it would add the port of 3000, like so: localhost:3000/my-wordpress/wp-json)

This particular instance I solved by adding index.php, and successfully reach the Wordpress api, like so: http://localhost/nextjs_restapi/index.php/wp-json.

But it didn't work for WooCommerce, and it is not elegant, so I was wondering if you had any ideas about how to solve this problem from happening when changing Wordpress General Settings?

Would really appreciate any suggestions.

Thank you in advance!