Update Broke Custom Handlers?

Hey there love the project. Been able to work through most issues, but most recently updated our package json according to the ‘Keeping frontity update to date’ article:

       "dependencies": {
-    "@frontity/components": "^1.7.1",
-    "@frontity/core": "^1.11.1",
+    "@frontity/components": "^1.7.2",
+    "@frontity/core": "^1.12.0",
     "@frontity/html2react": "^1.6.2",
-    "@frontity/tiny-router": "^1.4.1",
-    "@frontity/wp-source": "^1.11.2",
+    "@frontity/tiny-router": "^1.4.2",
+    "@frontity/wp-source": "^1.11.3",
     "@frontity/yoast": "^2.1.1",
+    "@frontity/google-tag-manager-analytics": "^1.3.0",
     "@hoffmanacademy/ux-components": "^4.11.5",
-    "frontity": "^1.14.3",
+    "frontity": "^1.15.0",

Site will still load, but none of my custom handler are being picked up? I have tried including the handlers in the theme.action.init portion of my index.js and libraries.source.handlers to no avail? I have yet to downgrade, but wondering if I missed something in the docs somewhere?

Some troubleshooting…I’ve tried console logging in my handlers to see if they are firing, but they do not appear to be firing.

Hi @brandonleejennings

Can you share a link to a repo. That way members of the community can look at your code and clone the project in order to dig in and try to help you.

See here for the kind of info that you can provide that will help others to help you.

This is a private repo so I can’t share, but has anything been changed in the release that would impact the loading of handlers?

Here’s settings:

const settings = {
  "name": "marketing-frontend-app",
  "state": {
    "frontity": {
      "url": "https://www.hoffmanacademy.com",
      "title": "Hoffman Academy",
      "description": "Learn Piano Online",
      "keywords" : "piano"
    }
  },
  "packages": [
    {
      "name": "hoffman-theme",
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          //"url": 'https://wpe.hoffmanacademy.com',
          "url" : 'http://localhost:10008',
       
          "homepage": "home-page",
          "redirections" : "404",
        },
        "postTypes" : [{
          type: "resource",
          endpoint: "resource",
          archive: "/resources",
        },
        {
          type: "mega_topic",
          endpoint: "/mega_topic",
          archive: "/mega_topics",
        },
        {
          type: "mega_footer",
          endpoint: "/mega_footer",
          archive: "/mega_footers",
        },
        {
          type: "mega_main",
          endpoint: "/mega_main",
          archive: "/mega_mains",
        }],
        "taxonomies": [
          {
            taxonomy: "topic",
            endpoint: "/topics/",
            postTypeEndpoint: "/resource",
            params: {
              per_page: 5,
              _embed: true,
            },
          },
          {
            taxonomy: "audience",
            endpoint: "/audiences/",
            postTypeEndpoint: "/resource",
            params: {
              per_page: 5,
              _embed: true,
            },
          },
          {
            taxonomy: "feature",
            endpoint: "/features/",
            postTypeEndpoint: "resource",
            params: {
              per_page: 5,
              _embed: true,
            },
          },
        ]
      }
    },
    "@frontity/tiny-router",
    "@frontity/yoast",
    "@frontity/html2react",
  ]
};

export default settings;

Here’s index.js:

import {MENU} from "./const/menu";

import {topicHandler, topicsHandler} from "./handlers/topicHandler";
import {resourceHandler, resourcesHandler,resourceByTopicHandler, popularPostsHandler, featuredResourceHandler, relatedResourcesHandler} from "./handlers/resourceHandler";
import {searchHandler} from "./handlers/searchHandler";
import {topicMenuHandler, mainMenuHandler, footerMenuHandler} from "./handlers/menuHandler";
import {practiceCalculatorHandler, popularSongsHandler} from "./handlers/customPageHandlers";
import {settingsHandler} from "./handlers/settingsHandler";
import { CookieHelper } from "./helper/cookie-helper";

if(typeof process.env.NEW_RELIC_KEY !== 'undefined' && typeof process.env.NEW_RELIC_APP_NAME !== 'undefined') {
  require('../../../newrelic');
}

const before = async ({ libraries, actions, d, f }) => {
  /*
  libraries.source.handlers.push(mainMenuHandler);
  await actions.source.fetch("/mainmegamenu");

  libraries.source.handlers.push(footerMenuHandler);
  await actions.source.fetch("/footermegamenu");

  libraries.source.handlers.push(topicMenuHandler);
  await actions.source.fetch("/topicmegamenu");
  */
  libraries.source.handlers.push(settingsHandler);
  await actions.source.fetch("/theme-settings");
};

export default {
  name: "hoffman-theme",
  roots: {
    theme: Root
  },
  state: {
    theme: {  
      autoPrefetch: "in-view",
      menu: MENU,
      isMenuOpen: false,
      featured: {
        showOnList: false,
        showOnPost: false,
      },
      salePopUpOpen : false,
      salePopUpDismissed : false,
      saleOn : false,
      sale : {
        sale_button_text: "Act Now",
        sale_button_url: "https://www.hoffmanacamy.com/blog",
        sale_headline: "Save 10%",
        sale_image: {sizes:{medium:''}},
        sale_running: false,
        sale_supporting_text: "We have great stuff!"
      },
      cookiesAccepted : true,
      liveBroadCasting : false,
    }
  },
  actions: {
    theme: {
      openMenu: ({ state }) => {
      },
      closeMenu: ({ state }) => {
      },
      openSalePopUp: ({ state }) => {
        state.theme.salePopUpOpen = true;
      },
      
      dismissSalePopUp: ({ state }) => {
        CookieHelper.setSaleDismissedCookie();
        state.theme.salePopUpOpen = false;
      },
      setSalePopUp: ({ state }) => {
        state.theme.salePopUpOpen = !CookieHelper.getSaleDismissedCookie();
      },
      closeSalePopUp: ({ state }) => {
        state.theme.salePopUpOpen = false;
      },
      init: ({ libraries }) => {
        // Add the handler to wp-source.
        libraries.source.handlers.push(topicHandler);
        libraries.source.handlers.push(topicsHandler);
        libraries.source.handlers.push(resourceHandler);
        libraries.source.handlers.push(resourcesHandler);
        libraries.source.handlers.push(resourceByTopicHandler);
        libraries.source.handlers.push(searchHandler);
        libraries.source.handlers.push(topicMenuHandler);
        libraries.source.handlers.push(mainMenuHandler);
        libraries.source.handlers.push(footerMenuHandler);
        libraries.source.handlers.push(practiceCalculatorHandler);
        libraries.source.handlers.push(popularSongsHandler);
        libraries.source.handlers.push(popularPostsHandler);
        libraries.source.handlers.push(featuredResourceHandler);
        libraries.source.handlers.push(relatedResourcesHandler);
      },
      beforeSSR: before,
      beforeCSR: before,
    },  
  },
  libraries: {
    source: {
    }
  }
};

Here’s an example of a handler:

    pattern: "/theme-settings",
    func: async ({ route, params, state, libraries }) => {
        // 1. Get ACF option page from REST API.
        const response = await libraries.source.api.get({
            endpoint: `/acf/v3/options/options`
        });
        const option = await response.json();
        
        // 2. Add data to `source`.
        Object.assign(state.source.data[route], option);
        console.log('triggered-handler')
        state.source.settings = option.acf;
        state.theme.sale = {...option.acf};
        state.theme.saleOn = true;//option.acf.sale_running;
        state.theme.salePopUpOpen =  true;
    }
  };

Take note of the triggered handler console log. I’m not seeing that when making a fetch to that path

Hi @brandonleejennings

Is this something that was working and now isn’t? Apart from updating the packages have you made any other changes?

  1. I updated to the most current versions of frontity as shown in my package.json file, AND added the google analytics tag manager package.
  2. deleted node_modules/ and package.lock, then re-installed everything: npm i
  3. ran npx frontity dev
  4. Project builds ok, but only will load home page and no handlers appear to be working. See updated code for how I’m including handlers.
  5. All handlers appeared to be working before.
  6. Reverted package.json files and repeated step 2.
  7. Site loaded everything as fine; all handlers working.

Hi @mburridge!

I’m struggelig with the same thing. I have a custom handler from the guie about fetching menus from WordPress, and it no longer works after the lastest update. But it is only when i define a homepage. If i don’t define the a homepage, the menu handler works fine. But if I define a homepage in the frontity settings, the menu handler stops working.

Interesting. I didn’t modify that variable in frontity settings, but I can say that’s something else I noticed. I was getting 404 for all my handlers fetches, but the home page was always set in the state.source.page object.

It’s almost like it it’s not attempted to fetch anything because the state is already populated for the home page…?

Hi!

There’s an issue opened and a work in progress that may be related with this issue

Hi @juanma !

Do you know when the bug fix will be merged? :slight_smile:

@kasper, you can see the evolution of the work in the PR

Awesome! Looks like that PR has been merged. I’ll try and do another update to see if it resolved my issue. From what I can tell it looks to be very related.

1 Like