ServerError: No handler has matched for the given link

🙋Get Help
1

Hello,

I have a SPA and I’m exposing some custom routes from WP API in order to load only some selected posts (and not all the posts) which the site admin (my client) will want promote and which will be displayed in specific ways (some set of posts, matching a specific url, will be mapped in a component to be styled in a way, some others, matching another url, will be mapped in another component to be styled in another way…).

Right now i am exposing:

api.cadence-musique.fr/wp-json/wp/v2/numerique
api.cadence-musique.fr/wp-json/wp/v2/numerique/actus
api.cadence-musique.fr/wp-json/wp/v2/numerique/focus
api.cadence-musique.fr/wp-json/wp/v2/numerique/retours

The front url while development is :
localhost:3000/numerique

I have created handlers as explained in documentation and other topics here.
When i’m fetching it in Before CSR I’m getting :
ServerError: No handler has matched for the given link: "numerique/" at eval (webpack-internal:///./node_modules/@frontity/wp-source/src/actions.ts:24:19) at Object.eval [as fetch] (webpack-internal:///./node_modules/@frontity/connect/src/create-store.js:5:1702) at eval (webpack-internal:///./packages/Cadence-Theme/src/index.js:6:458) at eval (webpack-internal:///./node_modules/@frontity/connect/src/create-store.js:5:1702) 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 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: "numerique/"' }

While

const data = state.source.get(state.router.link);
console.log(data);

is logging

{
  link: '/numerique/',
  route: '/numerique/',
  query: {},
  page: 1,
  isFetching: false,
  isReady: false
}

Here is my code :

frontity.settings.js

const settings = {
  "name": "cadence-front",
  "state": {
    "frontity": {
      "url": "https://future.cadence-musique.fr",
      "title": "Site de Cadence",
      "description": "Api Wordpress & Frontity"
    }
  },
  "packages": [
    {
      "name": "Cadence-Theme",
      "state": {
        "theme": {
          "menu": [
            [
              "Accueil",
              "/"
            ],
          ],
          "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://api.cadence-musique.fr/wp-json",
        }
      }
    },
    {
      "name": "@frontity/tiny-router",
      "state": {
        "router": {
          "autoFetch": false
        }
      }
    },
    "@frontity/html2react"
  ]
};

export default settings;

index.js

import React from "react";
import Root from "./Root";
import numerique from "./CustomHandlers";

export default {
  name: "Cadence-Theme",
  roots: {
    theme: Root
  },
  state: {
    theme: {
      mode: 'accueil',
    }
  },
  actions: {
    init: ({ libraries }) => {
      libraries.source.handlers.push(numerique);
    },
    theme: {
      beforeSSR: ({ actions }) => async () => {
        await actions.source.fetch("numerique");
      },
      beforeCSR: ({ actions }) => async () => {
        await actions.source.fetch("numerique");
      }
    },
  },
};

CustomHandlers.js

let numerique = {
    name: "numerique",
    priority: 10,
    pattern: "numerique",
    func: async ({ link, params, state, libraries, force }) => {
      const response = await libraries.source.api.get({
        endpoint: "numerique"
      });

      const data = await response.json();

    Object.assign(state.source.data["numerique"], {
      data: data,
      actus: data.actus,
      retours: data.retours,
      focus: data.focus,
      isNiveaux1_2: true,
    });
    },
}

export default numerique;

package.json


{
  "name": "cadence-front",
  "version": "1.0.0",
  "private": true,
  "description": "Frontity project",
  "keywords": [
    "frontity"
  ],
  "scripts": {
    "dev": "frontity dev",
    "build": "frontity build",
    "serve": "frontity serve"
  },
  "prettier": {},
  "dependencies": {
    "@frontity/core": "^1.7.3",
    "@frontity/html2react": "^1.3.5",
    "@frontity/mars-theme": "./packages/mars-theme",
    "@frontity/tiny-router": "^1.2.1",
    "@frontity/wp-source": "^1.8.1",
    "Cadence-Theme": "file:packages/Cadence-Theme",
    "frontity": "^1.10.1",
    "react-headroom": "^3.0.0"
  }
}

Thanks for your help.

2

Hi @gregoire

I don’t think you need to perform the same action in beforeSSR and in beforeCSR. I think doing it in beforeSSR should suffice.

Also I see there are no posts in numerique, this list will be empty. There are only posts in numerique/actus, numerique/focus, and numerique/retours.

Do you have a repo that we can clone so we can examine and test your code?

3

Hi @mburridge,
Thanks for your replying.
Working on it with Gregoire.
We found a work around for that and will be posting it soon in case it can help.
Cheers!

2 Likes