InMemoryCache: Data with null arguments not merged with data without arguments in

[layerssss]

Intended outcome:

• write to cache for items { ...} with 1 item
• write to cache for items(foo: $foo) { .. } with 2 items, with $foo being null or undefined
• read form cache for items { ... }
• Expect result is 2

Actual outcome:

Result is 1

How to reproduce the issue:

https://codesandbox.io/s/vibrant-sun-fkcn5?file=/src/index.jsx:129-142

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

const client = new ApolloClient({
  cache: new InMemoryCache()
});

client.writeQuery({
  query: gql`
    query {
      items {
        id
      }
    }
  `,
  data: {
    items: [
      {
        id: 1,
        __typename: "Item"
      }
    ]
  }
});

client.writeQuery({
  query: gql`
    query($foo: Int) {
      items(foo: $foo) {
        id
      }
    }
  `,
  data: {
    items: [
      {
        id: 1,
        __typename: "Item"
      },
      {
        id: 2,
        __typename: "Item"
      }
    ]
  }
});

const { items } = client.readQuery({
  query: gql`
    query {
      items {
        id
      }
    }
  `
});

console.log(items.length);

In the app I'm working on. I can see from Apollo devtools that these two entries are lists using different keys.

Versions

    "@apollo/client": "^3.4.13",
    "graphql": "^15.6.0",

[layerssss]

Hi, could someone look at this to see if it's something unexpected? The use case leading to this is I have a collection field items accepting some filter args e.g items(searchTerm: String).

Somewhere on UI the query

query($searchTerm: String) {
  folder {
    id
    items(searchTerm: $searchTerm) {
      id
    }
  }
}

... runs with { searchTerm: null }, returing the un-filtered / whole collection.

Then a mutation

mutation {
  addItem {
    folder {
      id
      items {
        id
      }
    }
  }
}

... is expected to notify UI of added item. But since items{searchTerm:null} and items were saved as different entries in cache, UI is not notified.

[layerssss]

Please, could someone points to me to the right direction for this. It seems that I can't get around this... apart from using two different queries ... one with args, one without args(in order to not have {} in the cache key). But that totally diminishes the point of having optional argument in GraphQL.

[louisholley]

@layerssss did you ever find a solution to this?

[layerssss]

@louisholley sadly not. Kinda like a workaround I've changed my code to always include an argument (in my case limit: 20 for paging). Then combined with "null-arg" being set to undefined.

In short:

const { items } = client.readQuery({
  query: gql`
    query($searchTerm: String) {
      items(limit: 20, searchTerm: $searchTerm) {
        id
      }
    }
  `, { searchTerm: undefined }
});

reads the same cache as

const { items } = client.readQuery({
  query: gql`
    query {
      items(limit: 20) {
        id
      }
    }
  `
});