How to handle offline statuses with React Query

Create a component named <ErrorMessage /> or something similar:

import React from 'react'
import { onlineManager } from 'react-query'

const ErrorMessage: React.FC = () => {
  const isOnline = onlineManager.isOnline()

  return isOnline ? <DefaultErrorMessage /> : <OfflineErrorMessage />
}

const DefaultErrorMessage: React.FC = () => (
  <>
    <p>
      Something seems to have gone wrong on our side. Our team has been
      notified.
    </p>

    <p>
      Try to refresh this page. If the problem persists, you can contact us at{' '}
      <a href="mailto:hello@example.com?subject=Website error">
        hello@example.com
      </a>{' '}
      and we can help out!
    </p>
  </>
)

const OfflineErrorMessage: React.FC = () => (
  <>
    <h2>Oops.</h2>

    <p>
      It seems there's a problem with your network. Please check your internet
      connection and then try refreshing the page.
    </p>
  </>
)

export default ErrorMessage

Then, render this component in your ErrorBoundary.