From 05c8fac6d66e11374d70078397ea4874d077de8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Thu, 1 Jun 2023 16:21:31 +0200
Subject: [PATCH] Add docs CI and fix docs build (#176)

* Add docs CI and fix docs build

* Fix CI name
---
 .github/workflows/ci-docs.yaml                | 27 +++++++++++++++++++
 docs/docs/dev-docs/development/workflows.mdx  |  3 ++-
 .../dev-docs/getting-started/local-setup.mdx  |  2 +-
 docs/src/pages/graphql.js                     | 14 +++++++---
 4 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 .github/workflows/ci-docs.yaml

diff --git a/.github/workflows/ci-docs.yaml b/.github/workflows/ci-docs.yaml
new file mode 100644
index 000000000..0f262de24
--- /dev/null
+++ b/.github/workflows/ci-docs.yaml
@@ -0,0 +1,27 @@
+name: CI Docs
+on:
+  push:
+jobs:
+  docs-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Docs / Install Dependencies
+        run: cd docs && npm install
+      - name: Docs / Build Documentation
+        run: cd docs && npm run build
diff --git a/docs/docs/dev-docs/development/workflows.mdx b/docs/docs/dev-docs/development/workflows.mdx
index bfcf484a6..739390e88 100644
--- a/docs/docs/dev-docs/development/workflows.mdx
+++ b/docs/docs/dev-docs/development/workflows.mdx
@@ -8,7 +8,8 @@ The following steps assume that you have installed and configure the project wit
 
 ## IDE Setup
 
-If you are using VSCode, please use the `Dev Containers` extension to open the project in a container. This will allow you to run Visual Studio on top of the docker container. This will allow you to run the project without having to install node on your machine.
+If you are using VSCode, please use the `Dev Containers` extension to open the project in a container.
+This will allow you to run Visual Studio on top of the docker container.
 
 ## Front tests
 
diff --git a/docs/docs/dev-docs/getting-started/local-setup.mdx b/docs/docs/dev-docs/getting-started/local-setup.mdx
index cd0482c32..99de5fb2d 100644
--- a/docs/docs/dev-docs/getting-started/local-setup.mdx
+++ b/docs/docs/dev-docs/getting-started/local-setup.mdx
@@ -61,7 +61,7 @@ Once this is completed you should have:
 
 ## 6. Development
 
-Documented [here](/development/workflows.md)
+Documented [here](../development/workflows.mdx)
 
 ## Without Docker (Not recommended)
 
diff --git a/docs/src/pages/graphql.js b/docs/src/pages/graphql.js
index 5cc0afa97..6227e41ed 100644
--- a/docs/src/pages/graphql.js
+++ b/docs/src/pages/graphql.js
@@ -3,16 +3,24 @@ import { GraphiQL } from 'graphiql';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Layout from '@theme/Layout';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import 'graphiql/graphiql.css';
 
-const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
+
+// Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
+function GraphiQLComponent() {
+  const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
+  return <GraphiQL fetcher={fetcher} />;
+}
 
 export default function graphQL() {
   return (
     <Layout title="Hello" description="Hello React Page">
-      <div class="fullHeightPlayground">
-        <GraphiQL fetcher={fetcher} />
+      <div className="fullHeightPlayground">
+        <BrowserOnly>
+          <GraphiQLComponent />
+        </BrowserOnly>
       </div>
     </Layout>
   );