Avoid GraphQL errors when Algolia is not configured

holly-cummins · Sep 13, 2023 · 3a23ee6 · 3a23ee6
1 parent 723e830
commit 3a23ee6
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 13 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -44,16 +44,17 @@ module.exports = {
     description: config.siteDescription,
     siteUrl: config.siteUrl,
     algolia: {
-      appId: process.env.ALGOLIA_APP_ID,
-      searchOnlyApiKey: process.env.ALGOLIA_SEARCH_ONLY_API_KEY,
-      indexName: process.env.ALGOLIA_INDEX_NAME
+      appId: process.env.ALGOLIA_APP_ID || "none",
+      searchOnlyApiKey: process.env.ALGOLIA_SEARCH_ONLY_API_KEY || "none",
+      indexName: process.env.ALGOLIA_INDEX_NAME || "none",
+      available: !algoliaMissing
     }
   },
   plugins: [
     {
       resolve: `gatsby-plugin-beam-analytics`,
       options: {
-        dataToken: process.env.BEAM_ID
+        dataToken: process.env.BEAM_ID || "none"
       }
     },
     `gatsby-plugin-styled-jsx`, // the plugin's code is inserted directly to gatsby-node.js and gatsby-ssr.js files

diff --git a/plugins/gatsby-plugin-beam-analytics/gatsby-ssr.js b/plugins/gatsby-plugin-beam-analytics/gatsby-ssr.js
@@ -1,7 +1,11 @@
 const React = require("react");
 
 exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
-  if (pluginOptions.dataToken && process.env.NODE_ENV === "production") {
+  if (
+    pluginOptions.dataToken &&
+    pluginOptions.dataToken !== "none" &&
+    process.env.NODE_ENV === "production"
+  ) {
     setHeadComponents([
       <script
         key="beam"

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -64,6 +64,7 @@ export class PureHeader extends React.Component {
                     fontLoaded={loaded}
                     pages={pages}
                     theme={theme}
+                    searchAvailable={this.props.searchAvailable}
                   />
                 )}
               </ScreenWidthContext.Consumer>

diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
@@ -30,10 +30,10 @@ class Menu extends React.Component {
       { to: "/type/podcast", label: "Podcasts", icon: icon("podcast") },
       { to: "/type/book", label: "Books", icon: icon("book") },
       { to: "/category/", label: "Topics", icon: Tag },
-      { to: "/search/", label: "Search", icon: Search },
+      this.props.searchAvailable && { to: "/search/", label: "Search", icon: Search },
       ...pages,
       { to: "/contact/", label: "Contact", icon: Envelope }
-    ];
+    ].filter(item => item); // Lazily filter out undefined items
 
     this.renderedItems = []; // will contain references to rendered DOM elements of menu
   }

diff --git a/src/components/Menu/Menu.test.js b/src/components/Menu/Menu.test.js
@@ -21,11 +21,12 @@ describe("Menu", () => {
         fontLoaded={loaded}
         pages={pages}
         theme={theme}
+        searchAvailable={true}
       />
     );
   });
 
   it("includes a search item", () => {
-    expect(screen.getByText("Search")).toBeTruthy();
+    expect(screen.queryByText("Search")).toBeTruthy();
   });
 });
diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -101,13 +101,25 @@ class Layout extends React.Component {
               id
               htmlAst
             }
+            site {
+              siteMetadata {
+                algolia {
+                  available
+                }
+              }
+            }
           }
         `}
         render={data => {
           const { children } = this.props;
           const {
             footnote: { htmlAst: footnoteHTMLAst, html: footnoteHTML },
-            pages: { edges: pages }
+            pages: { edges: pages },
+            site: {
+              siteMetadata: {
+                algolia: { available: searchAvailable }
+              }
+            }
           } = data;
 
           return (
@@ -119,6 +131,7 @@ class Layout extends React.Component {
                       path={this.props.location.pathname}
                       pages={pages}
                       theme={this.state.theme}
+                      searchAvailable={searchAvailable}
                     />
                     <main>{children}</main>
                     <Footer
@@ -137,18 +150,21 @@ class Layout extends React.Component {
                       html {
                         box-sizing: border-box;
                       }
+
                       *,
                       *:after,
                       *:before {
                         box-sizing: inherit;
                         margin: 0;
                         padding: 0;
                       }
+
                       body {
                         font-family: ${this.state.font400loaded
                           ? "'Open Sans', sans-serif;"
                           : "Arial, sans-serif;"};
                       }
+
                       h1,
                       h2,
                       h3 {
@@ -157,19 +173,24 @@ class Layout extends React.Component {
                         letter-spacing: -0.03em;
                         margin: 0;
                       }
+
                       h1 {
                         letter-spacing: -0.04em;
                       }
+
                       p {
                         margin: 0;
                       }
+
                       strong {
                         font-weight: ${this.state.font600loaded ? 600 : 400};
                       }
+
                       a {
                         text-decoration: none;
                         color: #666;
                       }
+
                       main {
                         width: auto;
                         display: block;

diff --git a/test-integration/frontpage.test.js b/test-integration/frontpage.test.js
@@ -5,6 +5,9 @@ const { authorName } = require("../src/utils/configger");
 
 const siteRoot = `http://localhost:${port}`;
 
+// eslint-disable-next-line jest/expect-expect,jest/valid-title,jest/no-disabled-tests
+const itSometimes = (condition, ...args) => (condition ? test(...args) : test.skip(...args));
+
 describe("main site", () => {
   beforeAll(async () => {
     await page.goto(siteRoot);
@@ -21,9 +24,15 @@ describe("main site", () => {
   });
 
   describe("header navigation bar", () => {
-    it("should have a Search option", async () => {
-      await expect(page.waitForXPath('//*[text()="Search"]')).resolves.toBeTruthy();
-    });
+    itSometimes(
+      process.env.ALGOLIA_APP_ID && process.env.ALGOLIA_APP_ID !== "none",
+      "should have a Search option",
+      async () => {
+        // We should only have a search bar if we have algolia configured
+        // eslint-disable-next-line jest/no-standalone-expect
+        await expect(page.waitForXPath('//*[text()="Search"]')).resolves.toBeTruthy();
+      }
+    );
 
     it("should have a Contact option", async () => {
       await expect(page.waitForXPath('//*[text()="Contact"]')).resolves.toBeTruthy();
@@ -47,7 +56,7 @@ describe("main site", () => {
       await expect(scrollButton.isIntersectingViewport()).resolves.toBeTruthy();
 
       // Click, which should scroll
-      await scrollButton.evaluate(scrollButton => scrollButton.click());
+      await scrollButton.evaluate(but => but.click());
       // Nasty hack; wait for some scrolling to happen
       await page.waitFor(2000);
       // Now the button should be out of view