[DPA-1384]: fix(chain): override apollo ID matching for chain

.changeset/eighty-apricots-rest.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': patch
+---
+
+fix: override unique handling logic of apollo client for chains

src/apollo.ts

@@ -1,4 +1,9 @@
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
+import {
+  ApolloClient,
+  defaultDataIdFromObject,
+  HttpLink,
+  InMemoryCache,
+} from '@apollo/client'
 import generatedIntrospection from 'src/types/generated/possibleTypes'
 
 const baseURL = process.env.CHAINLINK_BASEURL ?? location.origin
@@ -11,6 +16,23 @@ const httpLink = new HttpLink({
 export const client = new ApolloClient({
   cache: new InMemoryCache({
     possibleTypes: generatedIntrospection.possibleTypes,
+    // we need to explicitly handle the uniqueness of chain object because
+    // ID is not unique across as different network can have the same ID
+    // which confuses the caching of apollo client.
+    // the code below is to override the handling of uniqueness for Chain type.
+    dataIdFromObject(responseObject) {
+      switch (responseObject.__typename) {
+        case 'Chain':
+          if (!responseObject.network) {
+            throw new Error(
+              'Due to Chain ID not being unique across chain, ensure network is fetched too',
+            )
+          }
+          return `Chain:${responseObject.network}:${responseObject.id}`
+        default:
+          return defaultDataIdFromObject(responseObject)
+      }
+    },
   }),
   link: httpLink,
 })

src/components/Form/ChainConfigurationForm.test.tsx

@@ -23,6 +23,7 @@ describe('ChainConfigurationForm', () => {
             address: '0x1111',
             chain: {
               id: '1111',
+              network: 'evm',
             },
             createdAt: '2021-10-06T00:00:00Z',
             isDisabled: false,
@@ -428,6 +429,7 @@ function renderChainConfigurationForm(
           address: '0x1111',
           chain: {
             id: '1111',
+            network: 'evm',
           },
           createdAt: '2021-10-06T00:00:00Z',
           isDisabled: false,

src/hooks/queries/useEVMAccountsQuery.ts

@@ -5,6 +5,7 @@ export const ETH_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
     address
     chain {
       id
+      network
     }
     createdAt
     ethBalance

src/screens/Dashboard/AccountBalanceCard.tsx

@@ -15,6 +15,7 @@ export const ACCOUNT_BALANCES_PAYLOAD__RESULTS_FIELDS = gql`
     address
     chain {
       id
+      network
     }
     ethBalance
     isDisabled

src/screens/Node/NodeView.tsx

@@ -14,6 +14,7 @@ export const NODE_PAYLOAD_FIELDS = gql`
     name
     chain {
       id
+      network
     }
     httpURL
     wsURL

src/screens/Nodes/NodesView.tsx

@@ -22,6 +22,7 @@ export const NODES_PAYLOAD__RESULTS_FIELDS = gql`
     id
     chain {
       id
+      network
     }
     name
     state

src/screens/Transaction/TransactionView.tsx

@@ -12,6 +12,7 @@ export const ETH_TRANSACTION_PAYLOAD_FIELDS = gql`
   fragment EthTransactionPayloadFields on EthTransaction {
     chain {
       id
+      network
     }
     data
     from

src/screens/Transactions/TransactionsView.tsx

@@ -21,6 +21,7 @@ export const ETH_TRANSACTIONS_PAYLOAD__RESULTS_FIELDS = gql`
   fragment EthTransactionsPayload_ResultsFields on EthTransaction {
     chain {
       id
+      network
     }
     from
     hash

support/factories/gql/fetchAccountBalances.ts

@@ -8,6 +8,7 @@ export function buildETHKey(
     chain: {
       __typename: 'Chain',
       id: '42',
+      network: 'evm',
     },
     ethBalance: '0.100000000000000000',
     isDisabled: false,

support/factories/gql/fetchETHKeys.ts

@@ -11,6 +11,7 @@ export function buildETHKey(
     address: '0x0000000000000000000000000000000000000001',
     chain: {
       id: '42',
+      network: 'evm',
     },
     createdAt: minuteAgo,
     ethBalance: '0.100000000000000000',

support/factories/gql/fetchEthTransaction.ts

@@ -6,6 +6,7 @@ export function buildEthTx(
     __typename: 'EthTransaction',
     chain: {
       id: '42',
+      network: 'evm',
     },
     data: '0x',
     from: '0x0000000000000000000000000000000000000001',

support/factories/gql/fetchEthTransactions.ts

@@ -6,6 +6,7 @@ export function buildEthTx(
     __typename: 'EthTransaction',
     chain: {
       id: '42',
+      network: 'evm',
     },
     from: '0x0000000000000000000000000000000000000001',
     hash: '0x1111111111111111',

support/factories/gql/fetchNode.ts

@@ -10,6 +10,7 @@ export function buildNodePayloadFields(
     wsURL: 'wss://node1.com',
     chain: {
       id: '42',
+      network: 'evm',
     },
     state: '',
     sendOnly: false,

support/factories/gql/fetchNodes.ts

@@ -8,6 +8,7 @@ export function buildNode(
     name: 'node1',
     chain: {
       id: '42',
+      network: 'evm',
     },
     state: '',
     sendOnly: false,
@@ -23,6 +24,7 @@ export function buildNodes(): ReadonlyArray<NodesPayload_ResultsFields> {
       name: 'node1',
       chain: {
         id: '42',
+        network: 'evm',
       },
       order: 32,
     }),
@@ -31,6 +33,7 @@ export function buildNodes(): ReadonlyArray<NodesPayload_ResultsFields> {
       name: 'node2',
       chain: {
         id: '5',
+        network: 'evm',
       },
     }),
   ]