Skip to content

Instantly share code, notes, and snippets.

@riddla
Last active February 21, 2020 16:50
Show Gist options
  • Save riddla/399661fa555d2ca799c8a855d6de2d4b to your computer and use it in GitHub Desktop.
Save riddla/399661fa555d2ca799c8a855d6de2d4b to your computer and use it in GitHub Desktop.
Triggering Gatsbys __refresh webhook via a React component (ENABLE_GATSBY_REFRESH_ENDPOINT=true)
import React, { useState } from 'react'
import { setConfig } from 'react-hot-loader'
let style = {
position: 'fixed',
cursor: 'pointer',
top: 0,
right: 0,
background: 'green',
color: 'white',
border: 'none',
padding: '10px',
fontFamily: 'sans-serif',
fontSize: '14px',
}
setConfig({ pureSFC: true })
function RefreshContent({ children }) {
console.log(process.env)
const [refreshed, setRefreshed] = useState(false)
function refreshOrReload() {
if (refreshed) {
return typeof window !== undefined && window.location.reload()
}
console.log('refreshing content')
var oReq = new XMLHttpRequest()
oReq.open('POST', '/__refresh')
oReq.send()
setRefreshed(true)
}
return (
<button onClick={refreshOrReload} style={style}>
Refresh{refreshed ? 'ing' : ''} content{refreshed ? ' ... Reload?' : ''}
</button>
)
}
export default RefreshContent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment