app.jsx

import React from 'react'
import { ReactQueryCacheProvider, QueryCache } from 'react-query'
import { CSSReset } from '@chakra-ui/core'
import GlobalStyles from '../styles/global'
import { ReactQueryDevtools } from 'react-query-devtools'

const ReactQueryDevtoolsProd = React.lazy(() =>
  import('react-query-devtools/dist/react-query-devtools.production.min.js').then(devtools => ({
    default: devtools.ReactQueryDevtoolsProd,
  }))
)
const explicitlyEnabled =
  window.location.search.includes('dev-tools=true') || window.localStorage.getItem('dev-tools') === 'true'

const queryCache = new QueryCache({
  defaultConfig: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

const Providers = ({ children }) => {
  return (
    <ReactQueryCacheProvider queryCache={queryCache}>
      <CSSReset />
      <GlobalStyles />
      <ReactQueryDevtools initialIsOpen />
      {explicitlyEnabled ? (
        <React.Suspense fallback={null}>
          <ReactQueryDevtoolsProd initialIsOpen />
        </React.Suspense>
      ) : null}
      {children}
    </ReactQueryCacheProvider>
  )
}

export default Providers