# Apollo Client cache invalided by separate query

**URL:** <https://community.apollographql.com/t/apollo-client-cache-invalided-by-separate-query/7649>\
**Category:** Client SDKs\
**Tags:** client\
**Created:** [June 21, 2024, 12:26pm UTC](https://community.apollographql.com/t/apollo-client-cache-invalided-by-separate-query/7649 "2024-06-21T12:26:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathnhughes](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/nathnhughes/32/5184_2.png) [@nathnhughes](https://community.apollographql.com/u/nathnhughes)\
**Post date:** [June 21, 2024, 12:26pm UTC](https://community.apollographql.com/t/apollo-client-cache-invalided-by-separate-query/7649/1 "2024-06-21T12:26:39Z")

</div>

I am working on building a site at the moment that, among other things, allows you to see a table of financial transactions. This table is infinite scrolling and continues to get pages of transactions are you scroll.

```graphql
query UserTransactionSummary(
  $userId: ID # will use context user id if one not provided
  $filters: TransactionSummaryInput
  ) {
    userTransactionSummary(userId: $userId, filters: $filters) {
      transactions {
        id
        amount {
          formatted
          raw
        }
        cardDetails {
          displayName
          id
        }
        # more data...
      }
    }
}

# TransactionSummaryInput type

input TransactionSummaryInput {
  startDate: DateType
  endDate: DateType    
  filter: String
  walletId: ID
  transactionStatus: [TransactionStatus]
  transactionType: [TransactionType]
  limit: Int
  offset: Int
}

```

This query is paginated using the following typePolicy:

```tsx
const cacheConfig: InMemoryCacheConfig = {
  typePolicies: {   
    Query: {
      fields: {
        userTransactionSummary: {
          keyArgs: [
            "userId",
            "filters",
            ["filter", "walletId", "startDate", "endDate", "transactionType"],
          ],
          merge(existing = {}, incoming, { args }) {
            const offset = args?.filters?.offset || 0
            const transactions = existing?.transactions ? existing?.transactions?.slice(0) : []

            for (let i = 0; i < incoming?.transactions?.length; ++i) {
              transactions[offset + i] = incoming.transactions[i]
            }

            return { ...existing, ...incoming, transactions }
          },
        },
      },
      // other typePolicies...
    },
  },
}

```

As the transactions are being accessed through this `userTransactionSummary` query, which is where the arguments are received, the `typePolicy` is defined under the global `"Query"` key. This is a quirk of the way the api has been provided and is not easily changeable.

Clicking on a transaction opens a modal allowing to see the transaction history between yourself and the user you transacted with. The data for the modal is fetched with the following query:

```graphql
query UserTransactionHistory(
  $userId: ID # will use context user id if one not provided
  $secondaryUserId: ID!
  $filters: TransactionSummaryInput
) {
  userTransactionHistory(
    userId: $userId
    secondaryUserId: $secondaryUserId
    filters: $filters
  ) {
    transactions {
      id
      date
      isOutgoing
      originalAmount {
        formatted
      }
    }
  }
}

```

The issue i’m having is that calling the `UserTransactionHistory` query is causing the cache for the `UserTransactionSummary` query to be invalidated. Here’s an example scenario:

1. Open up the page with the transactions list. 10 results are loaded in using the `UserTransactionSummary` query.
2. as you scroll down additional batches of 10 results are loaded in using `fetchMore`.
3. Once you’re a few pages down _(with say 40 results)_ you click one of the results to open the history modal.
4. The history modal opens causing the `UserTransactionHistory` query to be called
5. The 40 cached results in the list of transactions are purged and reset to the initial 10

### Worth Noting

- adding console.logs to the merge functions of both queries typePolicies shows that when the `UserTransactionHistory` query is first called, the merge function for the `UserTransactionSummary` query is run.
- Using `fetchPolicy: "no-cache"` on the `UserTransactionHistory` query avoids the issue

Hoping someone may be able to explain this behaviour _(provided it’s expected?)_ and maybe explain what the best way to navigate it is.

Tried:

- different typePolicies
- different merge functions
- different fetch-policies
- briefly looked at @connection directives

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [June 21, 2024, 1:47pm UTC](https://community.apollographql.com/t/apollo-client-cache-invalided-by-separate-query/7649/2 "2024-06-21T13:47:24Z")

</div>

Is your `UserTransactionSummary` maybe also querying for `originalAmount`, but with different properties than just `formatted`?

---

<div class="post-metadata">

**Author:** ![nathnhughes](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/nathnhughes/32/5184_2.png) [@nathnhughes](https://community.apollographql.com/u/nathnhughes)\
**Post date:** [June 24, 2024, 9:01am UTC](https://community.apollographql.com/t/apollo-client-cache-invalided-by-separate-query/7649/3 "2024-06-24T09:01:15Z")

</div>

AMAZING!

I think I was totally aware of that behaviour but adding `raw` to the `originalAmount` _(so that it mirrors how the transactions are being queried in `UserTransactionSummary`)_ seemed to resolve the issue.

Very grateful for the support.