I'm working on a Nuxt app with the Vue Apollo module to better learn the GraphQL world.
One major issue I'm running in to is how slow updates to data appears to be - even if I'm using optimisticResponse
- because of how nested the data is contained within the Apollo Cache.
I'll give an example. On one page, I'm running a query on page load which contains Trips, Categories, Items, and Todos. This is a representation of what my data might look like in the cache:
ROOT_QUERY
trips: [Trip]
0: Trip:1
categories: [Category]
0: Category:1
items: [Item]
0: Item:1
1: Item:2
2: Item:3
todos: [Todo]
0: Todo:1
1: Todo:2
2: Todo:3
1: Trip:2
If I want to say remove one of the items contained within a Category, I would have to run a mutation that would look like this:
async function removeItem ({ fields, trip_id, apollo }) {
return await apollo.mutate({
mutation: removeItemMutation,
variables: fields,
optimisticResponse: {
__typename: 'Mutation',
removeItem: {
__typename: 'item',
id: fields.item_id,
name: '',
weight: 0,
unit: '',
price: 0,
category_id: fields.category_id,
quantity: 0,
position: 0,
created_at: Date.now(),
updated_at: Date.now()
}
},
update: (store, { data: { removeItem } }) => {
// read
const data = store.readQuery({ query: tripsQuery });
// mutate
const trip = data.trips.find(trip => trip.id === trip_id);
const category = trip.categories.find(category => category.id === fields.category_id);
remove(category.items, item => item.id === removeItem.id);
const otherTrips = data.trips.filter(t => t.id !== trip_id);
// write
store.writeQuery({
query: tripsQuery,
data: {
packs: [trip, ...otherTrips]
}
});
}
});
}
This seems extraordinarily verbose for something as simple as removing one item from an array. Currently when I run this (and even with optimisticResponse as I mentioned), there is still a delay of 1-2 seconds. I believe this is because it has to search through all of the nested data in order to find the correct item to remove.
Ultimately what my question is though, is why is the data stored in Apollo Cache in a nested fashion? If it's normalized (which it is), then why wouldn't the data structure be stored flattened, so that I could find that specific Item and remove it, without having to go searching deep within the bowels of multiple nested arrays?
It's extremely possible that I'm over-complicating or over-engineering how this works. Does anyone have a suggestion as to an easier way to handle this, or a way to flatten the data structure that is being stored in the Cache?
Update:
I wanted to include a screenshot of what my cache looks like. What I'd really love to do is have the ability to interact with a specific item in that list other than ROOT_QUERY
.