Clean the main file by grouping providers

[knsolutions]

Grouping Providers into a Single Component

You can create a new component that wraps all your context providers. This way, you can import and use this single component in your root file, making it cleaner.

Create a new file src/contexts/Providers.tsx:

import React from 'react'
import { AuthProvider } from './AuthProvider/AuthProvider'
import { UserProvider } from './UserProvider/UserProvider'
import { GraphQlProvider } from './GraphQlProvider/GraphQlProvider'

export const Providers: React.FC = ({ children }) => {
  return (
    <AuthProvider>
      <GraphQlProvider>
        <UserProvider>
          {children}
        </UserProvider>
      </GraphQlProvider>
    </AuthProvider>
  )
}

And the main.tsx

import { StrictMode } from 'react'
import * as ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { App, ErrorBoundary } from '@components'
import { Providers } from '@contexts/Providers'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <StrictMode>
    <ErrorBoundary>
      <Providers>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Providers>
    </ErrorBoundary>
  </StrictMode>,
)

[ocni-dtu]

Actually I want to get rid of the UserProvider, because it is not needed.
It could be considered if the AuthProvider shouldn't become a part of the GraphQLProvider, since you will never have auth and grapql without each other