Merge pull request #269 from visualize-admin/fix/locale-switching-dat…

…aloader-bugs fix: Geo data loaders locale switching bug
visualize-admin · Jan 21, 2022 · 9c47604 · 9c47604
2 parents 4d774f8 + 0dd6ff0
commit 9c47604
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 55 deletions.
diff --git a/app/graphql/context.tsx b/app/graphql/context.tsx
@@ -1,23 +1,17 @@
-import { ReactNode } from "react";
+import { ReactNode, useCallback } 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 = useCallback(
+    () => ({ headers: { "Accept-Language": locale } }),
+    [locale]
+  );
+
   return <Provider value={client}>{children}</Provider>;
 };
diff --git 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(() => {

diff --git a/app/pages/_document.tsx b/app/pages/_document.tsx
@@ -1,37 +1,10 @@
-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 (
-      <Html
-        data-app-version={`${process.env.NEXT_PUBLIC_VERSION}`}
-        lang={this.props.locale}
-      >
+      <Html data-app-version={`${process.env.NEXT_PUBLIC_VERSION}`}>
         <Head>
           <script src="/api/client-env"></script>
           {GA_TRACKING_ID && (