opeyemidy/_app.tsx

## _app.tsx
import '@/styles/index.css';
import '@/styles/chrome-bug.css';
import 'keen-slider/keen-slider.min.css';

import { AppProps, NextWebVitalsMetric } from 'next/app';
import { useRouter } from 'next/router';
import { ApolloProvider } from '@apollo/client';
import { useEffect, FC } from 'react';
import { useApollo } from '@/lib/apollo';
import * as gtag from '@/lib/analytics';
import { MediaContextProvider } from '@/lib/artsy-fresnel';
import { Head } from '@/components/Head';
import { GTagPageview } from '@/types/analytics';
import { ManagedGlobalContext } from '@/components/Context';
import { SWRConfig } from 'swr';
import { Provider as NextAuthProvider } from 'next-auth/client';
import fetch from 'isomorphic-unfetch';
import { fetcher, fetcherGallery } from '@/lib/swr-fetcher';
import { Configuration, Fetcher } from 'swr/dist/types';

type T = typeof fetcher | typeof fetcherGallery;
interface Combined extends Fetcher<T> {}

const Noop: FC = ({ children }) => <>{children}</>;
export default function NextApp({
    Component,
    pageProps
}: AppProps) {
    const apolloClient = useApollo(pageProps);

    const LayoutNoop = (Component as any).LayoutNoop || Noop;

    const router = useRouter();

    useEffect(() => {
        document.body.classList?.remove('loading');
    }, []);

    useEffect(() => {
        const handleRouteChange = (url: GTagPageview) => {
            gtag.pageview(url);
        };
        router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, [router.events]);

    return (
        <>
            <SWRConfig
                value={{
                    errorRetryCount: 5,
                    refreshInterval: 43200 * 10,
                    onLoadingSlow: (
                        key: string,
                        config: Readonly<
                            Required<Configuration<any, any, Combined>>
                        >
                    ) => [key, { ...config }]
                }}
            >
                <ApolloProvider client={apolloClient}>
                    <NextAuthProvider session={pageProps.session}>
                        <ManagedGlobalContext>
                            <MediaContextProvider>
                                <Head />
                                <LayoutNoop pageProps={pageProps}>
                                    <Component {...pageProps} />
                                </LayoutNoop>
                            </MediaContextProvider>
                        </ManagedGlobalContext>
                    </NextAuthProvider>
                </ApolloProvider>
            </SWRConfig>
        </>
    );
}
	import '@/styles/index.css';
	import '@/styles/chrome-bug.css';
	import 'keen-slider/keen-slider.min.css';

	import { AppProps, NextWebVitalsMetric } from 'next/app';
	import { useRouter } from 'next/router';
	import { ApolloProvider } from '@apollo/client';
	import { useEffect, FC } from 'react';
	import { useApollo } from '@/lib/apollo';
	import * as gtag from '@/lib/analytics';
	import { MediaContextProvider } from '@/lib/artsy-fresnel';
	import { Head } from '@/components/Head';
	import { GTagPageview } from '@/types/analytics';
	import { ManagedGlobalContext } from '@/components/Context';
	import { SWRConfig } from 'swr';
	import { Provider as NextAuthProvider } from 'next-auth/client';
	import fetch from 'isomorphic-unfetch';
	import { fetcher, fetcherGallery } from '@/lib/swr-fetcher';
	import { Configuration, Fetcher } from 'swr/dist/types';

	type T = typeof fetcher \| typeof fetcherGallery;
	interface Combined extends Fetcher<T> {}

	const Noop: FC = ({ children }) => <>{children}</>;
	export default function NextApp({
	Component,
	pageProps
	}: AppProps) {
	const apolloClient = useApollo(pageProps);

	const LayoutNoop = (Component as any).LayoutNoop \|\| Noop;

	const router = useRouter();

	useEffect(() => {
	document.body.classList?.remove('loading');
	}, []);

	useEffect(() => {
	const handleRouteChange = (url: GTagPageview) => {
	gtag.pageview(url);
	};
	router.events.on('routeChangeComplete', handleRouteChange);
	return () => {
	router.events.off('routeChangeComplete', handleRouteChange);
	};
	}, [router.events]);

	return (
	<>
	<SWRConfig
	value={{
	errorRetryCount: 5,
	refreshInterval: 43200 * 10,
	onLoadingSlow: (
	key: string,
	config: Readonly<
	Required<Configuration<any, any, Combined>>
	>
	) => [key, { ...config }]
	}}
	>
	<ApolloProvider client={apolloClient}>
	<NextAuthProvider session={pageProps.session}>
	<ManagedGlobalContext>
	<MediaContextProvider>
	<Head />
	<LayoutNoop pageProps={pageProps}>
	<Component {...pageProps} />
	</LayoutNoop>
	</MediaContextProvider>
	</ManagedGlobalContext>
	</NextAuthProvider>
	</ApolloProvider>
	</SWRConfig>
	</>
	);
	}