Adding a script tag using Gatsby JS

21 May 2020 in TIL

I recently needed to add a script tag to my Gatsby install for https://actionsbook.com and couldn’t work out the correct way to do it.

There are various options available online, from using React Helmet (which I didn’t get working. I also didn’t want the script in the <head>), to a useScript hook (which worked sometimes).

The solution that worked for me was to use setPostBodyComponents in gatsby-ssr.js like so:

export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="https://example.com/my-file.js"
src="https://example.com/my-file.js"
defer
/>,
]);
};

This works when running both gatsby develop and gatsby build