From 84862761bec266a30a2cd04bfa54cd530862b1da Mon Sep 17 00:00:00 2001 From: Graham Goh Date: Sat, 7 Dec 2024 00:43:13 +1100 Subject: [PATCH] fix(chain): override apollo ID matching for chain MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If the chains query returns different chain with same id eg ``` [ { "id": "1", "enabled": true, "network": "aptos", "__typename": "Chain" }, { "id": "1", "enabled": true, "network": "evm", "__typename": "Chain" } ] ``` The default apollo client behaviour is to assume ID is always unique, but it is not the case here so things start to become confused like in the screen shot where both “1” show up for APTOS even though the UI correctly filters it. The fix is to tell apollo client how to handle the uniqueness of the chain object. JIRA: https://smartcontract-it.atlassian.net/browse/DPA-1384 --- .changeset/eighty-apricots-rest.md | 5 ++++ src/apollo.ts | 24 ++++++++++++++++++- .../Form/ChainConfigurationForm.test.tsx | 2 ++ src/hooks/queries/useEVMAccountsQuery.ts | 1 + src/screens/Dashboard/AccountBalanceCard.tsx | 1 + src/screens/Node/NodeView.tsx | 1 + src/screens/Nodes/NodesView.tsx | 1 + src/screens/Transaction/TransactionView.tsx | 1 + src/screens/Transactions/TransactionsView.tsx | 1 + support/factories/gql/fetchAccountBalances.ts | 1 + support/factories/gql/fetchETHKeys.ts | 1 + support/factories/gql/fetchEthTransaction.ts | 1 + support/factories/gql/fetchEthTransactions.ts | 1 + support/factories/gql/fetchNode.ts | 1 + support/factories/gql/fetchNodes.ts | 3 +++ 15 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 .changeset/eighty-apricots-rest.md diff --git a/.changeset/eighty-apricots-rest.md b/.changeset/eighty-apricots-rest.md new file mode 100644 index 00000000..ff45f960 --- /dev/null +++ b/.changeset/eighty-apricots-rest.md @@ -0,0 +1,5 @@ +--- +'@smartcontractkit/operator-ui': patch +--- + +fix: override unique handling logic of apollo client for chains diff --git a/src/apollo.ts b/src/apollo.ts index b62651e3..4a4de042 100644 --- a/src/apollo.ts +++ b/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, }) diff --git a/src/components/Form/ChainConfigurationForm.test.tsx b/src/components/Form/ChainConfigurationForm.test.tsx index 643f5625..d42751da 100644 --- a/src/components/Form/ChainConfigurationForm.test.tsx +++ b/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, diff --git a/src/hooks/queries/useEVMAccountsQuery.ts b/src/hooks/queries/useEVMAccountsQuery.ts index e39a26cb..718dc87c 100644 --- a/src/hooks/queries/useEVMAccountsQuery.ts +++ b/src/hooks/queries/useEVMAccountsQuery.ts @@ -5,6 +5,7 @@ export const ETH_KEYS_PAYLOAD__RESULTS_FIELDS = gql` address chain { id + network } createdAt ethBalance diff --git a/src/screens/Dashboard/AccountBalanceCard.tsx b/src/screens/Dashboard/AccountBalanceCard.tsx index cd6d4e62..145d6f06 100644 --- a/src/screens/Dashboard/AccountBalanceCard.tsx +++ b/src/screens/Dashboard/AccountBalanceCard.tsx @@ -15,6 +15,7 @@ export const ACCOUNT_BALANCES_PAYLOAD__RESULTS_FIELDS = gql` address chain { id + network } ethBalance isDisabled diff --git a/src/screens/Node/NodeView.tsx b/src/screens/Node/NodeView.tsx index ef147dea..0d84b2b7 100644 --- a/src/screens/Node/NodeView.tsx +++ b/src/screens/Node/NodeView.tsx @@ -14,6 +14,7 @@ export const NODE_PAYLOAD_FIELDS = gql` name chain { id + network } httpURL wsURL diff --git a/src/screens/Nodes/NodesView.tsx b/src/screens/Nodes/NodesView.tsx index 30b3879f..69d6ba3a 100644 --- a/src/screens/Nodes/NodesView.tsx +++ b/src/screens/Nodes/NodesView.tsx @@ -22,6 +22,7 @@ export const NODES_PAYLOAD__RESULTS_FIELDS = gql` id chain { id + network } name state diff --git a/src/screens/Transaction/TransactionView.tsx b/src/screens/Transaction/TransactionView.tsx index e263b02a..8ae5fcbd 100644 --- a/src/screens/Transaction/TransactionView.tsx +++ b/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 diff --git a/src/screens/Transactions/TransactionsView.tsx b/src/screens/Transactions/TransactionsView.tsx index a760370a..2638d459 100644 --- a/src/screens/Transactions/TransactionsView.tsx +++ b/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 diff --git a/support/factories/gql/fetchAccountBalances.ts b/support/factories/gql/fetchAccountBalances.ts index 78ddf058..d304d306 100644 --- a/support/factories/gql/fetchAccountBalances.ts +++ b/support/factories/gql/fetchAccountBalances.ts @@ -8,6 +8,7 @@ export function buildETHKey( chain: { __typename: 'Chain', id: '42', + network: 'evm', }, ethBalance: '0.100000000000000000', isDisabled: false, diff --git a/support/factories/gql/fetchETHKeys.ts b/support/factories/gql/fetchETHKeys.ts index ceb2ca9c..c5b729c5 100644 --- a/support/factories/gql/fetchETHKeys.ts +++ b/support/factories/gql/fetchETHKeys.ts @@ -11,6 +11,7 @@ export function buildETHKey( address: '0x0000000000000000000000000000000000000001', chain: { id: '42', + network: 'evm', }, createdAt: minuteAgo, ethBalance: '0.100000000000000000', diff --git a/support/factories/gql/fetchEthTransaction.ts b/support/factories/gql/fetchEthTransaction.ts index 4c51e540..50a641d3 100644 --- a/support/factories/gql/fetchEthTransaction.ts +++ b/support/factories/gql/fetchEthTransaction.ts @@ -6,6 +6,7 @@ export function buildEthTx( __typename: 'EthTransaction', chain: { id: '42', + network: 'evm', }, data: '0x', from: '0x0000000000000000000000000000000000000001', diff --git a/support/factories/gql/fetchEthTransactions.ts b/support/factories/gql/fetchEthTransactions.ts index 516a9230..736d92d9 100644 --- a/support/factories/gql/fetchEthTransactions.ts +++ b/support/factories/gql/fetchEthTransactions.ts @@ -6,6 +6,7 @@ export function buildEthTx( __typename: 'EthTransaction', chain: { id: '42', + network: 'evm', }, from: '0x0000000000000000000000000000000000000001', hash: '0x1111111111111111', diff --git a/support/factories/gql/fetchNode.ts b/support/factories/gql/fetchNode.ts index fc2a9535..96cd065c 100644 --- a/support/factories/gql/fetchNode.ts +++ b/support/factories/gql/fetchNode.ts @@ -10,6 +10,7 @@ export function buildNodePayloadFields( wsURL: 'wss://node1.com', chain: { id: '42', + network: 'evm', }, state: '', sendOnly: false, diff --git a/support/factories/gql/fetchNodes.ts b/support/factories/gql/fetchNodes.ts index 18b93908..33658c68 100644 --- a/support/factories/gql/fetchNodes.ts +++ b/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 { name: 'node1', chain: { id: '42', + network: 'evm', }, order: 32, }), @@ -31,6 +33,7 @@ export function buildNodes(): ReadonlyArray { name: 'node2', chain: { id: '5', + network: 'evm', }, }), ]