Routing Deep Dive
Route Data Handling
When navigating to a new page, the frontend router makes a request to WordPress to fetch the JSON data needed by the current route. The request is handled by the RouteLoader (accessible via useRouter().loader).
The JSON data is available via /{path}?_props=1 in SPA mode, and /_data/route/{path} in serverless mode.
| Mode | URL | JSON Page |
|---|---|---|
| Serverless | /work/my-project | /_data/route/work/my-project/ |
| SPA | /work/my-project | /work/my-project/?_props=1 |
The serverless mode /_data/route/{path} version proxies the /{path}/?_props=1 version from the WordPress origin, but allows for additional processing, caching and (potential future) static site generation.
On the WordPress side, eddev-php takes over, recognising that ?_props=1 is present in the URL. Wordpress resolves the route that should be displayed using the WordPress Template Hierarchy and any Custom Routes, and identifies the view, or page template, that should be rendered.
Once the page template has been found, eddev-php then looks for a paired .graphql file with the same name. So if views/single-project.tsx is resolved as the template, then it’ll search for a views/single-project.graphql file.
That GraphQL file is then executed, and the result is captured.
During this process, one of the following will happen:
- The route resolves to a 404 page, so the view is set to
_errorandpropsis set to the error details. - The GraphQL query throws an error, so the view is set to
_errorandpropsis set to the error details. - The GraphQL succeeds, and the process continues.
- No GraphQL file was present, so props is set to an empty object.
After this, wp_head(), wp_footer() are called, allowing WordPress (and plugins) to spit out meta tags and any other tags that should be present on the page. This HTML output is parsed, and included in the final payload.
The request is then resolved with the final JSON payload.
Most of this process also occurs when the page is loaded directly, but the JSON payload is instead printed in a <script>window._PAGE_DATA = {...}</script>, with app data also being included.