Add total item count to search results

This will help us set up pagination!

src/app/ItemSearchPage.js

@@ -129,6 +129,7 @@ function ItemSearchPageResults({ query: latestQuery }) {
           offset: 0
           limit: 30
         ) {
+          numTotalItems
           items {
             id
             name
@@ -197,7 +198,8 @@ function ItemSearchPageResults({ query: latestQuery }) {
             details="I wanted to get this out asap for looking up specific items! Multi-page browsing coming soon 😅"
             marginTop="6"
           >
-            We only show the first 30 results for now! 😅
+            We only show the first 30 results for now! 😅 (
+            {data.itemSearch.numTotalItems.toLocaleString()} total)
           </WIPCallout>
         </Flex>
       )}

src/server/loaders.js

@@ -330,36 +330,56 @@ const buildItemSearchLoader = (db, loaders) =>
           ? [currentUserId, currentUserOwnsOrWants === "OWNS" ? "1" : "0"]
           : [];
 
-        const [rows, _] = await db.execute(
-          `SELECT DISTINCT items.*, t.name FROM items
+        const queryJoins = `
           INNER JOIN item_translations t ON t.item_id = items.id
           INNER JOIN parents_swf_assets rel
               ON rel.parent_type = "Item" AND rel.parent_id = items.id
           INNER JOIN swf_assets ON rel.swf_asset_id = swf_assets.id
           ${currentUserJoin}
-           WHERE ${matcherPlaceholders} AND t.locale = "en" AND
+        `;
+
+        const queryConditions = `
+          ${matcherPlaceholders} AND t.locale = "en" AND
           ${bodyIdCondition} AND
           ${zoneIdsCondition} AND ${itemKindCondition} AND
           ${currentUserCondition}
-           ORDER BY t.name
-           LIMIT ? OFFSET ?`,
-          [
+        `;
+        const queryConditionValues = [
           ...wordMatchersForMysql,
           ...bodyIdValues,
           ...zoneIds,
           ...currentUserValues,
-            actualLimit,
-            actualOffset,
-          ]
-        );
+        ];
+
+        const [[rows, _], [totalRows, __]] = await Promise.all([
+          db.execute(
+            `
+              SELECT DISTINCT items.*, t.name FROM items
+              ${queryJoins}
+              WHERE ${queryConditions}
+              ORDER BY t.name
+              LIMIT ? OFFSET ?
+            `,
+            [...queryConditionValues, actualLimit, actualOffset]
+          ),
+          db.execute(
+            `
+              SELECT count(DISTINCT items.id) AS numTotalItems FROM items
+              ${queryJoins}
+              WHERE ${queryConditions}
+            `,
+            queryConditionValues
+          ),
+        ]);
 
         const entities = rows.map(normalizeRow);
+        const { numTotalItems } = totalRows[0];
 
         for (const item of entities) {
           loaders.itemLoader.prime(item.id, item);
         }
 
-        return entities;
+        return [entities, numTotalItems];
       }
     );
 

src/server/types/Item.js

@@ -115,6 +115,7 @@ const typeDefs = gql`
     query: String!
     zones: [Zone!]!
     items: [Item!]!
+    numTotalItems: Int!
   }
 
   type ItemTrade {
@@ -472,7 +473,7 @@ const resolvers = {
         }
         bodyId = petType.bodyId;
       }
-      const items = await itemSearchLoader.load({
+      const [items, numTotalItems] = await itemSearchLoader.load({
         query: query.trim(),
         bodyId,
         itemKind,
@@ -483,7 +484,7 @@ const resolvers = {
         limit,
       });
       const zones = zoneIds.map((id) => ({ id }));
-      return { query, zones, items };
+      return { query, zones, items, numTotalItems };
     },
     itemSearchToFit: async (
       _,
@@ -509,7 +510,7 @@ const resolvers = {
         );
       }
       const { bodyId } = petType;
-      const items = await itemSearchLoader.load({
+      const [items, numTotalItems] = await itemSearchLoader.load({
         query: query.trim(),
         itemKind,
         currentUserOwnsOrWants,
@@ -520,7 +521,7 @@ const resolvers = {
         limit,
       });
       const zones = zoneIds.map((id) => ({ id }));
-      return { query, zones, items };
+      return { query, zones, items, numTotalItems };
     },
     newestItems: async (_, __, { newestItemsLoader }) => {
       const items = await newestItemsLoader.load("all-newest");