Gatsby: Re-rendering script when route changes

[Steffi3rd]

Hi,

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 ?

Edit :

I think it's not relied with react-load-script but Gatsby in general. New elements in DOM is not detected by the script. That's why I think it doesn't work. Someone have a solution?

        <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="5bfe9820478f42f6380cbe8exxx" 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

[Steffi3rd]

Please?

I tried many ways.

• with : react-load-script
• with : react-render-props-script-loader
• with modifying html.js : https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript

none of them worked...

First step : Load page, elements are render well with the script
Second : Change page, elements are not render anymore even the script is loaded....

[pieh]

It seems like that script (apester-sdk) is doing work just once. Perhaps you would need to do something like this in gatsby-browser.js:

exports.onRouteUpdate = () => {
  if (window.ApesterSDK) {
    window.ApesterSDK.Init()
  }
}

[Steffi3rd]

It seems like that script (apester-sdk) is doing work just once. Perhaps you would need to do something like this in gatsby-browser.js:

exports.onRouteUpdate = () => {
  if (window.ApesterSDK) {
    window.ApesterSDK.Init()
  }
}

Hi @pieh! Thanks for your answer. I have the same problem with opinion stage.

Where did you find this ApesterSDK.Init()?

Thanks

[Steffi3rd]

By the way, how to use gatsby-browser.js

I have this error:

Your plugins must export known APIs from their gatsby-node.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

- Your site's gatsby-node.js is exporting a variable named "onRouteUpdate" which isn't an API

[pieh]

You need to put that snippet in gatsby-browser.js file (not gatsby-node.js)

Where did you find this ApesterSDK.Init()?

reading https://github.com/ApesterDevelopers/javascript-sdk/blob/master/src/apester-sdk.js

---

edit: I'm not sure if it's up to date tho - but it is worth checking - maybe you could try it in developer console first

[Steffi3rd]

   if (window) {
      window.APESTER.reload();
    } 

but this don't

   if (window.APESTER) {
      window.APESTER.reload();
    } 

Do you know why?

[pieh]

What do you mean? second one doesn't work?

[Steffi3rd]

Update: It works now.

You give me the solution about onRouteUpdate, and thank you man!!!