feat: debounce api calls

Author: dastrong-codiga

package-lock.json

@@ -115,6 +115,7 @@
     "@electron/remote": "^2.0.8",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "apollo-link-debounce": "^3.0.0",
     "bootstrap": "^5.1.3",
     "buffer": "^6.0.3",
     "electron-debug": "^3.2.0",

package.json

@@ -1,10 +1,21 @@
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
+import {
+  ApolloClient,
+  InMemoryCache,
+  HttpLink,
+  ApolloLink,
+} from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
+import DebounceLink from 'apollo-link-debounce';
 import { API_URL, TOKEN } from 'renderer/lib/config';
 
-const httpLink = new HttpLink({
-  uri: API_URL,
-});
+const DEFAULT_DEBOUNCE_TIMEOUT = 500;
+
+const Link = ApolloLink.from([
+  new DebounceLink(DEFAULT_DEBOUNCE_TIMEOUT),
+  new HttpLink({
+    uri: API_URL,
+  }),
+]);
 
 const authLink = setContext((_, { headers }) => {
   // get the authentication token from local storage if it exists
@@ -19,7 +30,7 @@ const authLink = setContext((_, { headers }) => {
 });
 
 const client = new ApolloClient({
-  link: authLink.concat(httpLink),
+  link: authLink.concat(Link),
   cache: new InMemoryCache(),
 });
 

src/renderer/graphql/client.ts

@@ -20,6 +20,9 @@ export default function FavoriteCookbooks() {
       ...GET_USER_SUBSCRIBED_COOKBOOKS_VARIABLES,
       name: filters.searchTerm,
     },
+    context: {
+      debounceKey: 'favorite-cookbooks',
+    },
   });
 
   const userCookbooks = data?.user?.cookbooks || [];

src/renderer/pages/FavoriteCookbooks.tsx

@@ -20,6 +20,9 @@ export default function MySnippets() {
       ...GET_USER_SUBSCRIBED_RECIPES_VARIABLES,
       name: filters.searchTerm,
     },
+    context: {
+      debounceKey: 'favorite-snippets',
+    },
   });
 
   const userFavoriteRecipes = data?.user?.recipes || [];

src/renderer/pages/FavoriteSnippets.tsx

@@ -30,6 +30,9 @@ export default function Home() {
       onlyPublic: filters.privacy === 'public' ? true : null,
       onlySubscribed: filters.isSubscribed || null,
     },
+    context: {
+      debounceKey: 'search',
+    },
   });
 
   const results = data?.searchResults || [];

src/renderer/pages/Home.tsx

@@ -20,6 +20,9 @@ export default function MyCookbooks() {
       ...GET_USER_COOKBOOKS_VARIABLES,
       name: filters.searchTerm,
     },
+    context: {
+      debounceKey: 'my-cookbooks',
+    },
   });
 
   const userCookbooks = data?.user?.cookbooks || [];

src/renderer/pages/MyCookbooks.tsx

@@ -24,6 +24,9 @@ export default function MySnippets() {
         filters.language !== Language.ALL_LANGUAGES ? filters.language : null,
       tag: filters.tags,
     },
+    context: {
+      debounceKey: 'my-snippets',
+    },
   });
 
   const userRecipes = data?.user?.recipes || [];

src/renderer/pages/MySnippets.tsx

@@ -20,6 +20,9 @@ export default function TeamCookbooks() {
       ...GET_SHARED_COOKBOOKS_VARIABLES,
       name: filters.searchTerm,
     },
+    context: {
+      debounceKey: 'team-cookbooks',
+    },
   });
 
   const userCookbooks = data?.cookbooks || [];

src/renderer/pages/TeamCookbooks.tsx

@@ -24,6 +24,9 @@ export default function TeamSnippets() {
         filters.language !== Language.ALL_LANGUAGES ? [filters.language] : null,
       tag: filters.tags,
     },
+    context: {
+      debounceKey: 'team-snippets',
+    },
   });
 
   const teamRecipes = data?.recipes || [];