how to update fragment like graphql cache does ?

[krunaldodiya]

So, Imagine if you call api and cache the data, now if you want to update part of data how would you do that ?

for example:- It's React Native project, there are 2 endpoints,

1. /users/posts
2. users/1/posts (all post of user by id 1, it's logged in user)

now imagine we call first endpoint, get data and cache it, and then I go to my profile, and see all my post, now I update one of my post title,

Question is how am i gonna update all cached data, /users/posts also has my posts and there may be some other endpoints where the same post exists which is not updated,

In GraphQL we can update fragment, I am not sure if it is even possible to do it with this ?

[sergiodxa]

You can invalidate the cache of /users/posts calling mutate("/users/posts/") without any other argument, that will make any component using that cache key revalidate, if the component using that key is not currently mounted it will automatically revalidate when it's mounted back so you don't need to do anything there.

It means if you are on the lists of posts, go to your profile, edit a post, go back to list of posts the list will initially be stale then SWR will fetch the API again to revalidate it against the API, which will get the updated post back and update the UI.

[krunaldodiya]

can't we add some functionality to represent data as collection / entity / model which will handle cache invalidation process where we don't have to do it manually, if we change any entity, that functionality make sure to update all entity,

For Example

class User extends Entity {}

const collection = new Collection()
collection.add(User)

const users = useSWR("/users")
collection.addMany(users).cache()

User.find(3).cache().invalidate()
User.find(3).cache().update({name: "something else"})

[sergiodxa]

That will do too many suppositions about the data, SWR right now it’s completely agnostic of what you fetch and the shape of it. Maybe you are fetching something which doesn’t have ids and can’t be represented as an entity (e.g. a list of strings), or maybe you are fetching a jsonapi.org compatible API, or a GraphQL endpoint or gRCP, SWR works for all of them right now. However I’m not a maintainer, let see what the ZEIT team thinks.

[shuding]

Changing this to discussion — it’s not something planned for the near future, as SWR’s current goal is to remain minimal and backend agnostic. However if we can figure out a good way to define the relationship of resources, we can definitely revisit this topic. Thanks for your feedback and understanding!

[MaximilianSchon]

Hey, sorry for gravedigging, but this is something which we think would be nice.

Maybe, SWR could take a parameter 'existsIn' or 'belongsTo' like the following:

{
    "existsIn": [
        {
            "key": (data) => ["/users"],
            "find": (cache, data) => cache.findIndex(d => d.id === data.id), // returns the key in the cache (even if nested, so for example it could be Items[${i}] as well.) 
            "ifNotPresent": (cache, data) => [...cache, data], // allows to add objects if not present
        }
    ]
}

Which matches the object and if it is found, replaces it or if it is not present it adds it to the array.

Currently we are doing something like this, which works but could be better.

mutate(unstable_serialize(key(endpoint)), (data) => {
            if (!data) return data;
            switch (action) {
                case 'CREATE':
                    return [({
                        Count: data[0].Count + 1,
                        Items: [{
                            ...entity, 
                            CreatedAt: Date.now(),
                            UpdatedAt: Date.now()},
                             ...data[0].Items]
                    }), ...data.slice(1)];
                case 'UPDATE':
                    return data.map(data => ({
                        Count: data?.Count,
                        Items: data?.Items.map(item => {
                            if (item[this.id] === id) {
                                return entity
                            }
                            return item;
                        })
                    }))
                case 'DELETE':
                    return data.map(data => ({
                        Count: data.Count - 1,
                        Items: data.Items.filter(item => item[this.id] !== id)
                    }))
            }
            
        }, false);