From b063215bea9d6f4407785dbb61806e3e3f7ee8b5 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 19 Jan 2022 18:08:53 +0100 Subject: [PATCH 1/5] fix: Retrieve locale proprely to avoid lags that affect DataLoaders --- app/pages/_document.tsx | 28 ++-------------------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/app/pages/_document.tsx b/app/pages/_document.tsx index 769f3a3f3..1bd0e52a7 100644 --- a/app/pages/_document.tsx +++ b/app/pages/_document.tsx @@ -1,31 +1,7 @@ -import Document, { - Html, - Head, - Main, - NextScript, - DocumentContext, -} from "next/document"; +import Document, { Head, Html, Main, NextScript } from "next/document"; import { GA_TRACKING_ID } from "../domain/env"; -import { parseLocaleString } from "../locales/locales"; - -class MyDocument extends Document<{ locale: string }> { - static async getInitialProps(ctx: DocumentContext) { - const initialProps = await Document.getInitialProps(ctx); - - const { query, pathname } = ctx; - - /** - * Parse locale from query OR pathname - * - so we can have dynamic locale query params like /[locale]/create/... - * - and static localized pages like /en/index.mdx - */ - const locale = /^\/\[locale\]/.test(pathname) - ? parseLocaleString(query.locale?.toString() ?? "") - : parseLocaleString(pathname.slice(1)); - - return { ...initialProps, locale }; - } +class MyDocument extends Document { render() { return ( Date: Wed, 19 Jan 2022 18:14:19 +0100 Subject: [PATCH 2/5] feat: Remove redundant lang prop setting --- app/pages/_document.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/pages/_document.tsx b/app/pages/_document.tsx index 1bd0e52a7..9886ba92a 100644 --- a/app/pages/_document.tsx +++ b/app/pages/_document.tsx @@ -4,10 +4,7 @@ import { GA_TRACKING_ID } from "../domain/env"; class MyDocument extends Document { render() { return ( - + {GA_TRACKING_ID && ( From 20842e2635da1256ec40be9d21bf42cb40137c9e Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 20 Jan 2022 10:15:33 +0100 Subject: [PATCH 3/5] fix: Switch to useLocale for urql --- app/graphql/context.tsx | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/app/graphql/context.tsx b/app/graphql/context.tsx index 2584faf3e..f64f3eee8 100644 --- a/app/graphql/context.tsx +++ b/app/graphql/context.tsx @@ -1,23 +1,16 @@ import { ReactNode } from "react"; import { createClient, Provider } from "urql"; import { GRAPHQL_ENDPOINT } from "../domain/env"; -import { defaultLocale } from "../src"; +import { useLocale } from "../src"; -const client = createClient({ - url: GRAPHQL_ENDPOINT, - fetchOptions: () => { - const lang = - typeof document !== "undefined" - ? document.querySelector("html")?.getAttribute("lang") - : undefined; - return { - headers: { - "Accept-Language": lang ? lang : defaultLocale, - }, - }; - }, -}); +const client = createClient({ url: GRAPHQL_ENDPOINT }); export const GraphqlProvider = ({ children }: { children: ReactNode }) => { + const locale = useLocale(); + + client.fetchOptions = () => ({ + headers: { "Accept-Language": locale }, + }); + return {children}; }; From 0acf6820df76a62b51f2b38aa4dde88f94015cc1 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 20 Jan 2022 10:15:48 +0100 Subject: [PATCH 4/5] feat: Remove redundant lang attr setting --- app/pages/_app.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx index 65a4db13b..937019316 100644 --- a/app/pages/_app.tsx +++ b/app/pages/_app.tsx @@ -1,24 +1,23 @@ -import "core-js/features/array/flat-map"; import { I18nProvider } from "@lingui/react"; // Used for color-picker component. Must include here because of next.js constraints about global CSS imports import "@reach/menu-button/styles.css"; +import "core-js/features/array/flat-map"; import { AppProps } from "next/app"; import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { ThemeProvider } from "theme-ui"; import { ContentMDXProvider } from "../components/content-mdx-provider"; -import { analyticsPageView } from "../lib/googleAnalytics"; import { PUBLIC_URL } from "../domain/env"; import { GraphqlProvider } from "../graphql/context"; -import { LocaleProvider } from "../locales/use-locale"; +import { analyticsPageView } from "../lib/googleAnalytics"; +import "../lib/nprogress.css"; import { useNProgress } from "../lib/use-nprogress"; import { i18n, parseLocaleString } from "../locales/locales"; +import { LocaleProvider } from "../locales/use-locale"; import * as defaultTheme from "../themes/federal"; import { loadTheme, ThemeModule } from "../themes/index"; -import "../lib/nprogress.css"; - export default function App({ Component, pageProps }: AppProps) { const { query, @@ -37,10 +36,6 @@ export default function App({ Component, pageProps }: AppProps) { i18n.activate(locale); } - useEffect(() => { - document.querySelector("html")?.setAttribute("lang", locale); - }, [locale]); - // Load custom theme const __theme = query.__theme ? query.__theme.toString() : undefined; useEffect(() => { From 0dd6ff0a0096327e4899d1f53d078f926b97b759 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 20 Jan 2022 11:15:30 +0100 Subject: [PATCH 5/5] feat: Add useCallback to fetchOptions --- app/graphql/context.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/graphql/context.tsx b/app/graphql/context.tsx index f64f3eee8..19034e0e8 100644 --- a/app/graphql/context.tsx +++ b/app/graphql/context.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from "react"; +import { ReactNode, useCallback } from "react"; import { createClient, Provider } from "urql"; import { GRAPHQL_ENDPOINT } from "../domain/env"; import { useLocale } from "../src"; @@ -8,9 +8,10 @@ const client = createClient({ url: GRAPHQL_ENDPOINT }); export const GraphqlProvider = ({ children }: { children: ReactNode }) => { const locale = useLocale(); - client.fetchOptions = () => ({ - headers: { "Accept-Language": locale }, - }); + client.fetchOptions = useCallback( + () => ({ headers: { "Accept-Language": locale } }), + [locale] + ); return {children}; };