fix(explorer): use getnodes to avoid nesting (#2198)

apps/explorer/src/app/routes/assets/__generated__/assets.ts

@@ -3,17 +3,15 @@ import { Schema as Types } from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
+export type AssetsFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null };
+
 export type ExplorerAssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
 export type ExplorerAssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null } } | null> | null } | null };
 
-
-export const ExplorerAssetsDocument = gql`
-    query ExplorerAssets {
-  assetsConnection {
-    edges {
-      node {
+export const AssetsFieldsFragmentDoc = gql`
+    fragment AssetsFields on Asset {
   id
   name
   symbol
@@ -33,11 +31,19 @@ export const ExplorerAssetsDocument = gql`
       id
     }
   }
+}
+    `;
+export const ExplorerAssetsDocument = gql`
+    query ExplorerAssets {
+  assetsConnection {
+    edges {
+      node {
+        ...AssetsFields
       }
     }
   }
 }
-    `;
+    ${AssetsFieldsFragmentDoc}`;
 
 /**
  * __useExplorerAssetsQuery__

apps/explorer/src/app/routes/assets/assets.graphql

@@ -1,7 +1,4 @@
-query ExplorerAssets {
-  assetsConnection {
-    edges {
-      node {
+fragment AssetsFields on Asset {
   id
   name
   symbol
@@ -14,6 +11,7 @@ query ExplorerAssets {
       maxFaucetAmountMint
     }
   }
+
   infrastructureFeeAccount {
     type
     balance
@@ -21,6 +19,13 @@ query ExplorerAssets {
       id
     }
   }
+}
+
+query ExplorerAssets {
+  assetsConnection {
+    edges {
+      node {
+        ...AssetsFields
       }
     }
   }

apps/explorer/src/app/routes/assets/index.tsx

@@ -1,16 +1,15 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { getNodes, t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
 import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { useExplorerAssetsQuery } from './__generated__/assets';
+import type { AssetsFieldsFragment } from './__generated__/assets';
 
 const Assets = () => {
   const { data } = useExplorerAssetsQuery();
 
-  const assets = data?.assetsConnection?.edges?.map((n) => {
-    return n?.node;
-  });
+  const assets = getNodes<AssetsFieldsFragment>(data?.assetsConnection);
 
   if (!assets || assets.length === 0) {
     return <section></section>;