MPDX-8309 Send user's language to GraphQL server

pages/_app.page.tsx

@@ -57,8 +57,8 @@
 const GraphQLProviders: React.FC<{
   children: React.ReactNode;
 }> = ({ children = null }) => {
-  const { apiToken } = useRequiredSession();
-  const client = useMemo(() => makeClient(apiToken), [apiToken]);
+  const { apiToken, language } = useRequiredSession();
+  const client = useMemo(() => makeClient(apiToken, language), [apiToken]);
 
   return (
     <ApolloProvider client={client}>

pages/api/auth/[...nextauth].page.ts

@@ -32,6 +32,7 @@ declare module 'next-auth' {
       userID: string;
       impersonating?: boolean;
       impersonatorApiToken?: string;
+      language?: string | null;
     };
   }
 
@@ -40,6 +41,7 @@ declare module 'next-auth' {
     userID?: string;
     impersonating?: boolean;
     impersonatorApiToken?: string;
+    language?: string | null;
   }
 }
 
@@ -51,6 +53,7 @@ declare module 'next-auth/jwt' {
     userID?: string;
     impersonating?: boolean;
     impersonatorApiToken?: string;
+    language?: string | null;
   }
 }
 
@@ -165,6 +168,7 @@ const Auth = (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
         const handleSettingUserInfo = async (
           access_token: string,
           userId: string,
+          language?: string | null,
         ) => {
           const { user: userInfo, cookies } = setUserInfo(
             access_token,
@@ -175,6 +179,7 @@ const Auth = (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
           user.userID = userInfo.userID;
           user.impersonating = userInfo.impersonating;
           user.impersonatorApiToken = userInfo.impersonatorApiToken;
+          user.language = language;
           if (cookies) {
             res.setHeader('Set-Cookie', cookies);
           }
@@ -198,6 +203,7 @@ const Auth = (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
             await handleSettingUserInfo(
               data.apiOauthSignIn.token,
               data.apiOauthSignIn.user.id,
+              data.apiOauthSignIn.user.preferences?.locale,
             );
             return true;
           }
@@ -217,6 +223,7 @@ const Auth = (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
           await handleSettingUserInfo(
             data.oktaSignIn.token,
             data.oktaSignIn.user.id,
+            data.oktaSignIn.user.preferences?.locale,
           );
           return true;
         }
@@ -241,13 +248,15 @@ const Auth = (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
             userID: user.userID,
             impersonating: user.impersonating,
             impersonatorApiToken: user.impersonatorApiToken,
+            language: user.language,
           };
         } else {
           return token;
         }
       },
       session: ({ session, token }) => {
-        const { admin, developer, apiToken, userID, impersonating } = token;
+        const { admin, developer, apiToken, userID, impersonating, language } =
+          token;
 
         // Check the expiration of the API token JWT without verifying its signature
         // Throwing an exception here will cause a redirect to the login page
@@ -264,6 +273,7 @@ const Auth = (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
             apiToken,
             userID,
             impersonating,
+            language,
           },
         };
       },

pages/api/auth/apiOauthSignIn.ts

@@ -27,6 +27,10 @@ export type ApiOauthSignInMutation = { __typename?: 'Mutation' } & {
         user?: Types.Maybe<
           { __typename?: 'User' } & Pick<Types.User, 'id'> & {
               name: Types.User['firstName'];
+            } & {
+              preferences?: Types.Maybe<
+                { __typename?: 'Preference' } & Pick<Types.Preference, 'locale'>
+              >;
             }
         >;
       }
@@ -40,6 +44,9 @@ export const ApiOauthSignInDocument = gql`
       user {
         id
         name: firstName
+        preferences {
+          locale
+        }
       }
     }
   }

pages/api/auth/oktaSignIn.graphql

@@ -4,6 +4,9 @@ mutation oktaSignIn($accessToken: String!) {
     user {
       id
       name: firstName
+      preferences {
+        locale
+      }
     }
   }
 }

pages/api/handoff.page.ts

@@ -30,7 +30,7 @@ export const returnRedirectUrl = async (
     : jwtToken?.apiToken;
 
   if (apiToken && jwtToken?.userID && req.query.auth !== 'true') {
-    const ssrClient = makeSsrClient(apiToken);
+    const ssrClient = makeSsrClient(apiToken, jwtToken.language);
     const response = await ssrClient.query<
       GetDefaultAccountQuery,
       GetDefaultAccountQueryVariables

src/components/Settings/preferences/accordions/LanguageAccordion/LanguageAccordion.tsx

@@ -55,6 +55,16 @@ export const LanguageAccordion: React.FC<LanguageAccordionProps> = ({
         enqueueSnackbar(t('Saved successfully.'), {
           variant: 'success',
         });
+
+        enqueueSnackbar(
+          t(
+            'Please log out and log back in again to ensure all language changes are fully applied.',
+          ),
+          {
+            variant: 'warning',
+            persist: true,
+          },
+        );
       },
       onError: () => {
         enqueueSnackbar(t('Saving failed.'), {

src/lib/apollo/client.ts

@@ -25,10 +25,10 @@
   });
 }
 
-const makeClient = (apiToken: string) => {
+const makeClient = (apiToken: string, language?: string | null) => {
   const client = new ApolloClient({
     link: from([
-      makeAuthLink(apiToken),
+      makeAuthLink(apiToken, language),
       onError(({ graphQLErrors, networkError }) => {
         // Don't show sign out and display errors on the login page because the user won't be logged in
         if (graphQLErrors && window.location.pathname !== '/login') {

src/lib/apollo/link.ts

@@ -51,11 +51,13 @@ export const batchLink = split(
   restProxyHttpLink,
 );
 
-export const makeAuthLink = (apiToken: string) =>
+export const makeAuthLink = (apiToken: string, language?: string | null) =>
   new ApolloLink((operation, forward) => {
+    const languageHeader = language ? { 'Accept-Language': language } : {};
     operation.setContext(({ headers }) => ({
       headers: {
         ...headers,
+        ...languageHeader,
         Authorization: `Bearer ${apiToken}`,
       },
     }));

src/lib/apollo/ssrClient.ts

@@ -24,10 +24,11 @@
 
 const makeSsrClient = (
   apiToken: string | null,
+  language?: string | null,
 ): ApolloClient<NormalizedCacheObject> => {
   const links: ApolloLink[] = [];
   if (apiToken !== null) {
-    links.push(makeAuthLink(apiToken));
+    links.push(makeAuthLink(apiToken, language));
   }
   if (isRollBarEnabled) {
     links.push(serverErrorLink);