Improve search functionality

gatsby-config.ts

@@ -58,33 +58,6 @@ const config: GatsbyConfig = {
         portalZIndex: undefined,
       },
     },
-    {
-      resolve: 'gatsby-plugin-fusejs',
-      options: {
-        query: `
-          {
-            allSnap {
-              nodes {
-                snapId
-                name
-                summary
-                description {
-                  description
-                }
-              }
-            }
-          }
-        `,
-        keys: ['snapId', 'name', 'summary', 'description'],
-        normalizer: ({ data }) =>
-          data.allSnap.nodes.map((node) => ({
-            snapId: node.snapId,
-            name: node.name,
-            summary: node.summary,
-            description: node.description.description,
-          })),
-      },
-    },
     {
       resolve: 'gatsby-plugin-robots-txt',
       options: {

package.json

@@ -65,6 +65,7 @@
     "@metamask/utils": "^8.1.0",
     "@reduxjs/toolkit": "^1.9.6",
     "framer-motion": "^10.16.2",
+    "fuse.js": "^7.0.0",
     "gatsby": "^5.12.3",
     "linkify-react": "^4.1.1",
     "linkifyjs": "^4.1.1",
@@ -117,8 +118,6 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fast-deep-equal": "^3.1.3",
-    "fuse.js": "^6.6.2",
-    "gatsby-plugin-fusejs": "^2.0.2",
     "gatsby-plugin-manifest": "^5.12.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-segment-js": "^5.0.0",

src/features/snaps/store.ts

@@ -15,6 +15,7 @@ export type Snap = Fields<
   | 'snapId'
   | 'name'
   | 'summary'
+  | 'description'
   | 'icon'
   | 'category'
   | 'gatsbyPath'

src/hooks/useSearchResults.ts

@@ -1,29 +1,63 @@
+import Fuse from 'fuse.js';
 import { graphql, useStaticQuery } from 'gatsby';
-import { useGatsbyPluginFusejs } from 'react-use-fusejs';
+import { useMemo } from 'react';
 
 import type { Snap } from '../features';
 
+type QueryData = {
+  allSnap: {
+    nodes: Snap[];
+  };
+};
+
 /**
- * Get the search results for the given query. This will return the search
- * results for the given query, debounced by 300 milliseconds.
+ * Get the search results for the given query.
  *
  * @param query - The query to search for.
  * @returns The search results.
  */
 export function useSearchResults(query: string) {
-  const { fusejs } = useStaticQuery<{ fusejs: Queries.fusejs }>(graphql`
+  const { allSnap } = useStaticQuery<QueryData>(graphql`
     query {
-      fusejs {
-        index
-        data
+      allSnap {
+        nodes {
+          snapId
+          name
+          summary
+          description {
+            description
+          }
+        }
       }
     }
   `);
 
-  const results = useGatsbyPluginFusejs<Snap>(query, fusejs, {
-    threshold: 0.3,
-    distance: 300,
-  });
+  const fuse = useMemo(
+    () =>
+      new Fuse(allSnap.nodes, {
+        keys: [
+          {
+            name: 'name',
+            weight: 1,
+          },
+          {
+            name: 'summary',
+            weight: 0.25,
+          },
+          {
+            name: 'description',
+            weight: 0.25,
+            getFn: (snap) => snap.description.description,
+          },
+        ],
+        threshold: 0.3,
+      }),
+    [allSnap.nodes],
+  );
+
+  const results = useMemo(() => {
+    return fuse.search(query).map(({ item }) => item);
+  }, [fuse, query]);
 
-  return results.map(({ item }) => item);
+  return results;
 }

yarn.lock

@@ -5073,9 +5073,8 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     fast-deep-equal: ^3.1.3
     framer-motion: ^10.16.2
-    fuse.js: ^6.6.2
+    fuse.js: ^7.0.0
     gatsby: ^5.12.3
-    gatsby-plugin-fusejs: ^2.0.2
     gatsby-plugin-manifest: ^5.12.0
     gatsby-plugin-robots-txt: ^1.8.0
     gatsby-plugin-segment-js: ^5.0.0
@@ -12651,13 +12650,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fuse.js@npm:^6.0.0, fuse.js@npm:^6.6.2":
+"fuse.js@npm:^6.0.0":
   version: 6.6.2
   resolution: "fuse.js@npm:6.6.2"
   checksum: 17ae758ce205276ebd88bd9c9f088a100be0b4896abac9f6b09847151269d1690f41d7f98ff5813d4a58973162dbd99d0072ce807020fee6f9de60170f6b08eb
   languageName: node
   linkType: hard
 
+"fuse.js@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "fuse.js@npm:7.0.0"
+  checksum: d15750efec1808370c0cae92ec9473aa7261c59bca1f15f1cf60039ba6f804b8f95340b5cabd83a4ef55839c1034764856e0128e443921f072aa0d8a20e4cacf
+  languageName: node
+  linkType: hard
+
 "gatsby-cli@npm:^5.12.0":
   version: 5.12.0
   resolution: "gatsby-cli@npm:5.12.0"
@@ -12803,20 +12809,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gatsby-plugin-fusejs@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "gatsby-plugin-fusejs@npm:2.0.2"
-  dependencies:
-    fuse.js: ^6.0.0
-    gatsby: ^5.0.0
-    react: ^18.0.0
-  peerDependencies:
-    fuse.js: ">=6.0.0"
-    gatsby: ">=5.0.0"
-  checksum: 1849dcc31fb084cb649d9bb6ce0454029be4b0ec82f3df8b1878119bb369f13e52066a8c8bdc431776b7187cbfc7c77806e34475ea6d01848e0b31758af5d25d
-  languageName: node
-  linkType: hard
-
 "gatsby-plugin-manifest@npm:^5.12.0":
   version: 5.12.0
   resolution: "gatsby-plugin-manifest@npm:5.12.0"
@@ -13054,7 +13046,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gatsby@npm:^5.0.0, gatsby@npm:^5.12.3":
+"gatsby@npm:^5.12.3":
   version: 5.12.3
   resolution: "gatsby@npm:5.12.3"
   dependencies: