Add GQLErrorContext that passes errors from server to client

NDLANO · Nov 14, 2024 · 8c3b975 · 8c3b975
1 parent 40a5904
commit 8c3b975
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 16 deletions.
diff --git a/src/client.tsx b/src/client.tsx
@@ -31,6 +31,7 @@ import "@fontsource/source-serif-pro/index.css";
 import { i18nInstance } from "@ndla/ui";
 import { getCookie, setCookie } from "@ndla/util";
 import App from "./App";
+import GQLErrorContext, { ErrorContextInfo } from "./components/GQLErrorContext";
 import ResponseContext, { ResponseInfo } from "./components/ResponseContext";
 import { VersionHashProvider } from "./components/VersionHashContext";
 import { STORED_LANGUAGE_COOKIE_KEY } from "./constants";
@@ -45,7 +46,7 @@ declare global {
 }
 
 const {
-  DATA: { config, serverPath, serverQuery, serverResponse },
+  DATA: { config, serverPath, serverQuery, serverResponse, serverErrorContext },
 } = window;
 
 initSentry(config);
@@ -180,17 +181,20 @@ const renderOrHydrate = (container: HTMLElement, children: ReactNode) => {
   }
 };
 const responseContext = new ResponseInfo(serverResponse);
+const errorContext = new ErrorContextInfo(serverErrorContext);
 
 renderOrHydrate(
   document.getElementById("root")!,
   <HelmetProvider>
     <I18nextProvider i18n={i18n}>
       <ApolloProvider client={client}>
-        <ResponseContext.Provider value={responseContext}>
-          <VersionHashProvider value={versionHash}>
-            <LanguageWrapper basename={basename} />
-          </VersionHashProvider>
-        </ResponseContext.Provider>
+        <GQLErrorContext.Provider value={errorContext}>
+          <ResponseContext.Provider value={responseContext}>
+            <VersionHashProvider value={versionHash}>
+              <LanguageWrapper basename={basename} />
+            </VersionHashProvider>
+          </ResponseContext.Provider>
+        </GQLErrorContext.Provider>
       </ApolloProvider>
     </I18nextProvider>
   </HelmetProvider>,

diff --git a/src/components/GQLErrorContext.tsx b/src/components/GQLErrorContext.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { createContext, useContext } from "react";
+import { ApolloError, DocumentNode, OperationVariables, TypedDocumentNode } from "@apollo/client";
+import handleError from "../util/handleError";
+
+export interface ServerErrorContext {
+  error: string | undefined;
+}
+
+export class ErrorContextInfo {
+  error: { [key: string]: ApolloError };
+  constructor(serverErrorContext?: ServerErrorContext) {
+    this.error = serverErrorContext?.error ? JSON.parse(serverErrorContext.error) : {};
+  }
+
+  getError(key: string): ApolloError | undefined {
+    return this.error[key];
+  }
+
+  setError(key: string, error: ApolloError) {
+    this.error[key] = error;
+  }
+
+  serialize(): ServerErrorContext {
+    return { error: JSON.stringify(this.error) };
+  }
+}
+
+const GQLErrorContext = createContext<ErrorContextInfo>(new ErrorContextInfo());
+
+export const useApolloErrors = <TData extends any = any, TVariables extends OperationVariables = OperationVariables>(
+  errors: ApolloError | undefined,
+  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
+): ApolloError | undefined => {
+  const operation = query.definitions.find((definition) => definition.kind === "OperationDefinition");
+  const queryKey = operation?.name?.value;
+  const errorContext = useContext(GQLErrorContext);
+  if (!queryKey) {
+    handleError(new Error("No operation name found when using useApolloErrors, seems like a bug..."));
+    return errors;
+  }
+
+  if (errors) {
+    errorContext.setError(queryKey, errors);
+    return errors;
+  }
+
+  return errorContext.getError(queryKey);
+};
+export default GQLErrorContext;
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -6,6 +6,7 @@
  *
  */
 import { NormalizedCacheObject } from "@apollo/client";
+import { ServerErrorContext } from "./components/GQLErrorContext";
 import { ConfigType } from "./config";
 import { LocaleValues } from "./constants";
 
@@ -30,6 +31,7 @@ export interface WindowData {
     [key: string]: string | number | boolean | undefined | null;
   };
   serverResponse?: number;
+  serverErrorContext?: ServerErrorContext;
 }
 
 export interface NDLAWindow {

diff --git a/src/server/render/defaultRender.tsx b/src/server/render/defaultRender.tsx
@@ -26,6 +26,7 @@ import { MOVED_PERMANENTLY, OK, TEMPORARY_REDIRECT } from "../../statusCodes";
 import { UserAgentProvider } from "../../UserAgentContext";
 import { createApolloClient } from "../../util/apiHelpers";
 import { RenderFunc } from "../serverHelpers";
+import GQLErrorContext, { ErrorContextInfo, ServerErrorContext } from "../../components/GQLErrorContext";
 
 function getCookieLocaleOrFallback(resCookie: string, abbreviation: LocaleType) {
   const cookieLocale = getCookie(STORED_LANGUAGE_COOKIE_KEY, resCookie) ?? "";
@@ -70,6 +71,7 @@ export const defaultRender: RenderFunc = async (req) => {
   const i18n = initializeI18n(i18nInstance, locale);
   const redirectContext: RedirectInfo = {};
   const responseContext: ResponseInfo = new ResponseInfo();
+  const errorContext = new ErrorContextInfo();
   // @ts-ignore
   const helmetContext: FilledContext = {};
 
@@ -78,15 +80,17 @@ export const defaultRender: RenderFunc = async (req) => {
       <HelmetProvider context={helmetContext}>
         <I18nextProvider i18n={i18n}>
           <ApolloProvider client={client}>
-            <ResponseContext.Provider value={responseContext}>
-              <VersionHashProvider value={versionHash}>
-                <UserAgentProvider value={userAgentSelectors}>
-                  <StaticRouter basename={basename} location={req.url}>
-                    <App key={locale} />
-                  </StaticRouter>
-                </UserAgentProvider>
-              </VersionHashProvider>
-            </ResponseContext.Provider>
+            <GQLErrorContext.Provider value={errorContext}>
+              <ResponseContext.Provider value={responseContext}>
+                <VersionHashProvider value={versionHash}>
+                  <UserAgentProvider value={userAgentSelectors}>
+                    <StaticRouter basename={basename} location={req.url}>
+                      <App key={locale} />
+                    </StaticRouter>
+                  </UserAgentProvider>
+                </VersionHashProvider>
+              </ResponseContext.Provider>
+            </GQLErrorContext.Provider>
           </ApolloProvider>
         </I18nextProvider>
       </HelmetProvider>
@@ -104,13 +108,16 @@ export const defaultRender: RenderFunc = async (req) => {
 
   const apolloState = client.extract();
 
+  const serverErrorContext: ServerErrorContext = errorContext.serialize();
+
   return {
     status: redirectContext.status ?? OK,
     data: {
       helmetContext,
       htmlContent: html,
       data: {
         serverResponse: redirectContext.status ?? undefined,
+        serverErrorContext,
         serverPath: req.path,
         serverQuery: req.query,
         apolloState,

diff --git a/src/util/runQueries.ts b/src/util/runQueries.ts
@@ -13,14 +13,20 @@ import {
   TypedDocumentNode,
   useQuery,
 } from "@apollo/client";
+import { useApolloErrors } from "../components/GQLErrorContext";
 
 export function useGraphQuery<TData extends any = any, TVariables extends OperationVariables = OperationVariables>(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: QueryHookOptions<TData, TVariables>,
 ): QueryResult<TData, TVariables> {
-  return useQuery(query, {
+  const result = useQuery(query, {
     errorPolicy: "all",
     ssr: true,
     ...options,
   });
+
+  // Apollo client does not cache errors, we need some way to pass errors to the client if they occur on the server side
+  const error = useApolloErrors(result.error, query);
+
+  return { ...result, error };
 }