Simplify graphql queries (#134)

* Simplify queries significantly * Simplify node creation * Re-add missing props
FrederikBolding · Jan 2, 2024 · 44a4c6c · 44a4c6c
1 parent 87606a6
commit 44a4c6c
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 97 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -68,19 +68,29 @@ exports.sourceNodes = async ({
     .filter((chain) => chain.rpc.length > 0)
     .forEach((chain) => {
       const icon = chain.icon;
-      const iconCid = iconFiles[icon]?.name;
+      const iconFileId = iconFiles[icon]?.id;
+      const chainData = { ...chain, icon: iconFileId };
       const node = {
-        ...chain,
-        icon: iconCid,
+        ...chainData,
         parent: null,
         children: [],
-        id: createNodeId(`chain__${chain.chainId}`),
+        id: createNodeId(`chain__${chainData.chainId}`),
         internal: {
           type: "Chain",
-          content: JSON.stringify(chain),
-          contentDigest: createContentDigest(chain),
+          content: JSON.stringify(chainData),
+          contentDigest: createContentDigest(chainData),
         },
       };
       createNode(node);
     });
 };
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions;
+  const typeDefs = `
+    type Chain implements Node {
+      icon: File @link(from: "icon")
+    }
+  `;
+  createTypes(typeDefs);
+};
diff --git a/src/components/ChainIcon.tsx b/src/components/ChainIcon.tsx
@@ -4,8 +4,12 @@ import { ChainData } from "../types/chain";
 import { Image } from "@chakra-ui/react";
 
 export const ChainIcon = ({ icon, name }: Pick<ChainData, "icon" | "name">) =>
-  typeof icon === "string" ? (
-    <Image src={icon} width="40px" />
+  icon.childImageSharp ? (
+    <GatsbyImage
+      objectFit="scale-down"
+      image={icon.childImageSharp.gatsbyImageData}
+      alt={name}
+    />
   ) : (
-    <GatsbyImage objectFit="scale-down" image={icon} alt={name} />
+    <Image src={icon.publicURL} width="40px" />
   );
diff --git a/src/components/ChainList.tsx b/src/components/ChainList.tsx
@@ -1,20 +1,52 @@
 import { SimpleGrid } from "@chakra-ui/react";
 import React, { useContext } from "react";
-import { ChainData } from "../types/chain";
 import { Chain } from "./Chain";
 import { SearchContext } from "../context/SearchContext";
+import { graphql, useStaticQuery } from "gatsby";
+
+export const ChainList = () => {
+  const data = useStaticQuery(graphql`
+    {
+      allChain(sort: [{ chainId: ASC }]) {
+        nodes {
+          id
+          name
+          chain
+          chainId
+          rpc
+          icon {
+            publicURL
+            childImageSharp {
+              gatsbyImageData(width: 40, placeholder: NONE)
+            }
+          }
+          nativeCurrency {
+            decimals
+            name
+            symbol
+          }
+          explorers {
+            url
+            name
+            standard
+          }
+          status
+          faucets
+        }
+      }
+    }
+  `);
+
+  const chains = data.allChain.nodes;
 
-export const ChainList = ({
-  chains,
-}: {
-  chains: (ChainData & { id: string })[];
-}) => {
   const { query, showTestnets, showDeprecated } = useContext(SearchContext);
   const lowerCaseQuery = query.toLowerCase();
 
   const handleFiltering = (chain) => {
     const lowerCaseName = chain.name.toLowerCase();
-    const isTestnet = !showTestnets && (chain.faucets.length > 0 || lowerCaseName.includes("testnet"));
+    const isTestnet =
+      !showTestnets &&
+      (chain.faucets.length > 0 || lowerCaseName.includes("testnet"));
     const isDeprecated = !showDeprecated && chain.status === "deprecated";
     if (isTestnet || isDeprecated) {
       return false;

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,85 +6,17 @@ import { Web3Provider } from "../context/Web3Context";
 import { SearchProvider } from "../context/SearchContext";
 import { Layout } from "../components/Layout";
 
-const IndexPage = () => {
-  const rawData = useStaticQuery(graphql`
-    query ChainsQuery {
-      allChain {
-        nodes {
-          id
-          name
-          chain
-          chainId
-          rpc
-          icon
-          nativeCurrency {
-            decimals
-            name
-            symbol
-          }
-          explorers {
-            url
-            name
-            standard
-          }
-          status
-          faucets
-        }
-      }
-      allImageSharp {
-        nodes {
-          id
-          gatsbyImageData(width: 40, placeholder: NONE)
-          parent {
-            id
-            ... on File {
-              id
-              name
-            }
-          }
-        }
-      }
-      allFile(filter: { extension: { eq: "svg" } }) {
-        nodes {
-          id
-          name
-          extension
-          publicURL
-        }
-      }
-    }
-  `);
-
-  const rawChains = rawData.allChain.nodes.sort(
-    (a, b) => a.chainId - b.chainId
-  );
-  const icons = rawData.allImageSharp.nodes.reduce((acc, node) => {
-    acc[node.parent.name] = node.gatsbyImageData;
-    return acc;
-  }, {});
-
-  const svgIcons = rawData.allFile.nodes.reduce((acc, node) => {
-    acc[node.name] = node.publicURL;
-    return acc;
-  }, {});
-
-  const chains = rawChains.reduce((acc, chain, idx) => {
-    acc[idx].icon = icons[chain.icon] ?? svgIcons[chain.icon];
-    return acc;
-  }, rawChains);
-
-  return (
-    <>
-      <Seo />
-      <Web3Provider>
-        <SearchProvider>
-          <Layout>
-            <ChainList chains={chains} />
-          </Layout>
-        </SearchProvider>
-      </Web3Provider>
-    </>
-  );
-};
+const IndexPage = () => (
+  <>
+    <Seo />
+    <Web3Provider>
+      <SearchProvider>
+        <Layout>
+          <ChainList />
+        </Layout>
+      </SearchProvider>
+    </Web3Provider>
+  </>
+);
 
 export default IndexPage;
diff --git a/src/types/chain.ts b/src/types/chain.ts
@@ -3,7 +3,10 @@ import { IGatsbyImageData } from "gatsby-plugin-image";
 export interface ChainData {
   name: string;
   chain: string;
-  icon: string | IGatsbyImageData;
+  icon: {
+    publicURL: string;
+    childImageSharp: { gatsbyImageData: IGatsbyImageData };
+  };
   rpc: string[];
   chainId: number;
   nativeCurrency: ChainCurrency;