Best way to handle Graphcache updates with Mutations and Subscriptions on lists

[vescogma]

I have a super simple todo app. The schema looks like this:

type Todo {
  id: ID!
  from: String!
  text: String!
  timestamp: Float!
}
type Mutation {
  addTodo(from: String!, text: String!): Todo
}
type Query {
  todos: [Todo]
}
type Subscription {
  todoAdded: Todo
}

I'm using graphcache to update the cache when the client sends an addTodo mutation or receives an todoAdded.

cacheExchange({
  updates: {
    Mutation: {
      addTodo(result, args, cache, info) {
        cache.updateQuery({ query }, data => ({
          ...data,
          todos: [...data.todos, result.addTodo],
        }))
      },
    },
    Subscription: {
      todoAdded(result, args, cache, info) {
        cache.updateQuery({ query }, data => ({
          ...data,
          todos: [...data.todos, result.todoAdded],
        }))
      },
    },
  },
...

However this results in duplication of keys. So far what I have is a check at the callback of updateQuery.

Is this be the best way to handle this situation?

I also had the thought of sending the from field to my server when making a subscription request, so that it returns only todos that were not created by that person.

Thank you very much for your time!

[kitten]

so that it returns only todos that were not created by that person.

That's a really good safe guard and I'd implement that if you can either way.

But I'd also check whether the list that you're adding to already has an item with an identical ID. Since it doesn't matter what query you use (or fragment) you'd typically just make a one-off GraphQL query with the list and its keyable fields (e.g. id); the update of the list item will already be taken care of automatically. So therefore you'd just have to make sure you don't add any duplicates manually

[vescogma]

Thanks for the reply @kitten
Just to verify, do you mean something of this sort?:

const CheckerQuery = gql`
  query {
    todos {
      id
    }
  }
`

cacheExchange({
  updates: {
    Mutation: {
      addTodo(result, args, cache, info) {
        const { todos } = cache.readQuery({ query: CheckerQuery })
        // code: check to see if key is there, if its not, run cache.updateQuery
        ...

[kitten]

Exactly; yep 👍