Re-rendering script when route changes

Question

I use Gatsby and the package react-load-script.

My idea is to load a poll using an external load script.

When I load the page, the script is loaded and it works. I see my poll.

But when I change page using <Link to="..." />, the script seems always here but no fires. So I don't see my poll.

Why ? And how to fix that please ?

<Script
      url="https://static.apester.com/js/sdk/latest/apester-sdk.js"
      onCreate={this.handleScriptCreate.bind(this)}
      onError={this.handleScriptError.bind(this)}
      onLoad={this.handleScriptLoad.bind(this)}
    /> 
    <div className="apester-media" data-media-id="5bfe9820478f42ff6380cbe8exxx" height="416"></div>

Gatsby info

System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.24 => 2.0.43 
    gatsby-cli: ^2.4.5 => 2.4.5 
    gatsby-image: ^2.0.15 => 2.0.20 
    gatsby-plugin-lodash: ^3.0.1 => 3.0.2 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.8 
    gatsby-plugin-offline: ^2.0.6 => 2.0.13 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.1 
    gatsby-plugin-sharp: ^2.0.7 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.1 => 2.0.2 
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1 
    gatsby-source-prismic: ^2.0.0 => 2.1.0 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.8 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

score 1 · Answer 1 · answered Nov 29 '18 at 15:13

The solution is to use gatsby-browser.js

Inside this file I have to put the script to reload once again.

exports.onRouteUpdate = () => {
    if (window.APESTER) {
       window.APESTER.reload();
    } 
}

Explaination: When I change route, I executed this script.

Re-rendering script when route changes

Gatsby info

1 Answers1