Setting AutoFetching to false

🙋Get Help
1

Hi all! :wink: If I disabled the autofetch how can I navigate between custom pages (non wordpress)? Any idea?

Best regards,
Christian

2

You mean the autoFetch option of tiny-router, right?

If so, this is what it does. It’s really simple actually.

  • In the beforeSSR action, it does a fetch and awaits until it finishes:
actions: {
  router: {
    beforeSSR: async ({ actions, state }) => {
      if (state.router.autoFetch)
        await actions.source.fetch(state.router.link);
    }
  }
}
  • And in the actions.router.set, it also does a fetch (without awaiting):
actions: {
  router: {
    set: ({ actions }) => link => {
      if (state.router.autoFetch)
        actions.source.fetch(link);
      // then it changes the URL in the browser...
    }
  }
}

You can easily replicate the behaviour of beforeSSR in your theme/package, but adding the extra logic you need by using your own beforeSSR action.

And you can replicate the behaviour of actions.router.set in your Link component:

  const onClick = event => {
    event.preventDefault();

    // Set the router to the new url and fetch the new URL.
    actions.router.set(link);
    actions.source.fetch(link);

    // Scroll the page to the top.
    window.scrollTo(0, 0);
  };

And add your own logic there as well.

1 Like
3

Thanks @luisherranz! I understood how ssr works in frontity.

There are two things that I’m in trouble.

  1. I’m getting blanking pages when navigating with browser back/forward button and I dont know why. Also when navigating between pages the window.scrollTo(0,0) and pages with anchor tag (#) not works well. So I made a custom link component.
    Here is my custom link component:

     import React from 'react';
 import { connect } from 'frontity';

 const Link = ({ state, actions, link, href, title, rel, className, children, 'aria-current': ariaCurrent }) => {
   if (!link && href) link = href;
   const onClick = event => {
     // Do nothing if it's an external link
     if (link.startsWith('http')) return;

     // Verify if it's an internal section
     if (link.startsWith('#')) {
       document.getElementById(link.substring(1)).scrollIntoView();
       return;
     }

     event.preventDefault();
     // Set the router to the new url.
     actions.router.set(link);

     // Scroll the page to the top
     document.getElementById('main').scrollIntoView();

     // if the menu modal is open, close it so it doesn't block rendering
     if (state.theme.isMobileMenuOpen) {
       actions.theme.closeMobileMenu();
     }
   };

   return (
     <a href={link} rel={rel} onClick={onClick} className={className} aria-current={ariaCurrent} title={title}>
       {children}
     </a>
   );
 };

 export default connect(Link);

  2. Some times I’m getting an error in use-in-view module present in frontity Image package for lazy loading images

     use-in-view.ts?039e:41 Uncaught TypeError: Cannot read property '0' of undefined
     at eval (use-in-view.ts?039e:41)
     at Array.forEach (<anonymous>)
     at IntersectionObserver.eval (use-in-view.ts?039e:35)
4

What version of @frontity/components are you using?

5 
"@frontity/components": {
      "version": "1.1.15",
      "resolved": "https://registry.npmjs.org/@frontity/components/-/components-1.1.15.tgz",
      "integrity": "sha512-QGTEEQZ/v0dcTwxujkuNuGu27NZCN0uCB8/cT2no+bvC8gPVTeVlA8GSEEjvJLPG9Xi7x5T+GeOtbPEjIzAdMg==",
      "requires": {
        "@frontity/hooks": "^1.1.14"
      }
    },
6

Ok, I am sorry. I though we released the new version of but it looks like we didn’t. You should be able to update it to v1.2.0 which changes the logic in the useInView hook. We are going to do a release next Monday.

@SantosGuillamot could you please add a message here once the release is done? Thanks!

1 Like
8

Sure, I’ll let you know when it’s ready. I’ll try to do it on Monday as you said.

1 Like
9

@christian.nascimento could you please try updating now?

11

Thanks very much @luisherranz :wink: I’ll try soon.