Hi,
I’ve set up my settings as you have here but having a few issues.
Firstly, all fetch requests when I’m in the subdirectory return 404s, ‘No handler has matched for the given link: “/wp-rest-api-sidebars/v1/sidebars/sidebar-1/”’ is an example of an error message I get.
Adding a subdirectory to my main English site results in the same problem. Any ideas on how to fix this?
@juanma I don’t have an idea. I think it’s not enough information to troubleshoot this.
@leogardner12 Could you let us know in more details what you have tried?
Would you be able to also provide:
✓ A repository or codesandbox with the code of your project
✓ A deployed version of your site
✓ The URL of your WP REST API
I’ve created a fresh project and added to frontity.settings.js and index.js to replicate the error.
Heres the link to the repo: https://github.com/LeoGardner1/test-frontity-theme.git
If you go to http://localhost:3000/ and enter into the console frontity.state.theme.posts you should be able to see that the posts have been fetched fine.
However, if you go to http://localhost:3000/cy/ and enter frontity.state.theme.posts again you should be able to see the 404 error.
Appreciate the help.
Hi @leogardner12,
I’ve cloned your repo and launched your project locally and it seems to be working properly
This is what I get at http://localhost:3000/
and this is what I get at http://localhost:3000/cy/
My problem is the fetch requests returning 404.
in the console type frontity.state.theme.posts to see the response from the fetch request.
to see how I populate state.theme.posts go to lines 94/95 in src/index.js
On this example site, there is only one fetch request for posts but on my actual site I have to fetch menus and sidebars which all return 404 errors in the /cy subdirectory.
@mmczaplinski, can you help here?
This is the error that appears in the terminal when accessing http://localhost:3000/cy/
ServerError: No handler has matched for the given link: "/wp/v2/posts/"
at eval (webpack-internal:///./node_modules/@frontity/wp-source/src/actions.ts:23:19)
at Object.eval [as fetch] (webpack-internal:///./node_modules/@frontity/connect/src/create-store.js:8:725)
at eval (webpack-internal:///./packages/twentytwenty-theme/src/index.js:30:82)
at eval (webpack-internal:///./node_modules/@frontity/connect/src/create-store.js:8:725)
at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:63:88)
at Array.map (<anonymous>)
at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:63:48)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at eval (webpack-internal:///./node_modules/koa-mount/index.js:16:290) {
status: 404,
statusText: 'No handler has matched for the given link: "/wp/v2/posts/"'
I’ve taken a look at the project and the error that you are seeing is coming from your custom post handler that you have defined in the frontity.settings.js file.
I have removed the custom post handler and also removed the beforeSSR() action from your frontity.settings.js and the error goes away.
Looking at the handler that you have created, I feel like we didn’t do a good job explaining their purpose:
Thank you for the in-depth explanation. I thought I knew the purpose of handlers, in my real project I have handlers for fetching the menus as well as the sidebars. Both of theses return 404s when I’m in the /cy subdirectory.
I’ve pushed my language switcher and my menu handler to my test repo to help you better understand my problem.
I’m trying to implement a language switcher so a user can look at an individual post click on the language switcher and be taken to the translated post and vice versa. However, because the fetch request returns a 404 in the /cy subdirectory I cannot access the link for the translated post.
The response for my menu can be found at frontity.state.theme.menu. I have not bothered displaying the menu anywhere in this test site.
I don’t think you should need a custom post handler for what you are trying to achieve. Did you take a look at the solution shared in Multilanguage with ACF.
Also, allow me to point out a couple of things that I would approach differently in the repo that you shared. It would be quite time consuming to give you a complete solution but I can offer some pointers to set you on the right path.
This completely unrelated to the project itself, but I’d really recommend that you create a .gitignore file with the following content:
node_modules
build
This will prevent your dependencies and build files from being pushed to github. It’s really important so that someone sharing your repo installs and builds it from scratch sharing your repo and for cross-platform compatibility.
In your custom handlers, you shouldn’t need to match e.g. the /wp/v2/posts/:lang like you do:
const postsHandler = {
name: "posts",
priority: 10,
pattern: "/wp/v2/posts/:lang", // <-- not like that
func: async ({ route, params, state, libraries }) => {
...
}
instead, you want to match the frontend pathname which would be just /:lang. Take a look at the example in the docs.
The endpoint param in the api.get() does not need the whole path of the REST API like:
api.get({
endpoint: "/wp/v2/posts/",
params: {
lang: lang,
per_page: 10 // To make sure we get all elements
}
});
You can just specify `posts` like in the [example in the docs](https://docs.frontity.org/api-reference-1/wordpress-source#libraries-source-api-get).
You should use the Frontity’s built in <Link/> component in order to implement the “Language switcher”. You’ll notice that in the current implementation, the link is just a plain anchor tag so clicking it forces the whole page to be reloaded!