Triggering Gatsbys __refresh webhook via a React component (ENABLE_GATSBY_REFRESH_ENDPOINT=true)

RefreshContent.js

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