From ad219f8aee4fda56463b3d20519c423ffc3dc8c6 Mon Sep 17 00:00:00 2001
From: Omar Kohl <omarkohl@posteo.net>
Date: Sun, 1 Jan 2023 11:46:57 +0100
Subject: [PATCH] Frontend: Move ApolloClient definition to 'client.tsx'

This way it can be re-used as recommended here:

https://techblog.assignar.com/dos-and-donts-of-testing-apollo/

It's an attempt to avoid using Apollo MockedProvider, which seems to be
a real pain (e.g.
https://github.com/apollographql/apollo-client/issues/5917).
---
 frontend/src/client.tsx | 18 ++++++++++++++++++
 frontend/src/index.tsx  | 20 ++------------------
 2 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/client.tsx

diff --git a/frontend/src/client.tsx b/frontend/src/client.tsx
new file mode 100644
index 00000000..5ec892d0
--- /dev/null
+++ b/frontend/src/client.tsx
@@ -0,0 +1,18 @@
+import {ApolloClient, InMemoryCache} from "@apollo/client";
+
+export let API_URL = "/query";
+
+if (process.env.REACT_APP_API_URL) {
+    API_URL = process.env.REACT_APP_API_URL + "/query";
+} else if (process.env.NODE_ENV !== 'production') {
+    // For dev, maybe add another condition for tests
+    API_URL = "http://localhost:8080/query";
+
+}
+
+console.log('API_URL: ' + API_URL);
+
+export const client = new ApolloClient({
+    uri: API_URL,
+    cache: new InMemoryCache(),
+});
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 06b8a803..b729512a 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -3,34 +3,18 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+import {ApolloProvider} from '@apollo/client';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
+import {client} from "./client";
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
 
-// Default for production, use the same server as the frontend
-let API_URL = "/query";
-
-if (process.env.REACT_APP_API_URL) {
-    API_URL = process.env.REACT_APP_API_URL + "/query";
-} else if (process.env.NODE_ENV !== 'production') {
-    // For dev, maybe add another condition for tests
-    API_URL = "http://localhost:8080/query";
-}
-
-console.log('API_URL: ' + API_URL);
-
-const client = new ApolloClient({
-  uri: API_URL,
-  cache: new InMemoryCache(),
-});
-
 // Supported in React 18+
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement