What is the proper setup of an .htaccess file for headless WordPress and React site

Question

I have a Wordpress site with a headless React frontend. With the default .htaccess file that Wordpress puts up on install, the site was not correctly handling requests to any page other than the root. Those requests ignored React altogether. I modified the .htaccess to point all requests to the index.html file like the following...

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

This loads the React site just fine on all requests, but it's also failing on any api request to either wp-json or more importantly graphql. This means the page loads, but the content is essentially absent. How can I set up the .htaccess file to allow requests to those api endpoints on top of allowing the initial requests going to the index.html?

Answer 1

This seems to be working so far...

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^graphql(.*)$ index.php?url=$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Stole part of this from this answer... How to redirect all API requests using .htaccess, while keeping asset requests intact?

I'm not sure I need that url=$1 part since I'm not using it elsewhere, but I'm not that good at regex and at least the request are getting handled correctly.