Problems with removing an entity from cache with invalidate

[Svarto]

I am trying to implement a bookmarking button, so that when a user bookmarks (or de-bookmarks) a recipe, then it is added to their bookmarked recipe lists and when they navigate to the my recipe section in my React Native app they see their newely bookmarked recipe.

I can successfully add and remove the bookmark from the server, AND directly write to cache if the bookmark button is bookmarked or not, but I am struggling to update the local cache on the my recipe view list. This is a list on a separate screen and the bookmarked recipes are queried through their user profile, instead of by each recipe.

I have been trying to use cache.invalidate, but I just can't get it to evict the recipe_bookmark! I can successfully resolve the bookmark object, but when I change 'cache.resolve' to 'cache.invalidate', then nothing happens:

        const keyofField2 = cache.resolve("Query", "recipe_bookmarks", {
          where: {
            user_id: {
              _eq: args.where.user_id._eq,
            },
            _and: {
              recipe_id: {
                _eq: args.where.recipe_id._eq,
              },
            },
          },
        });

Works and returns:

Array [
  "recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:447",
]

I have created a custom key for the recipe_bookmarks using both the user_id and the recipe_id:

cacheExchange({
  resolvers: {
    Query: {
      recipe: simplePagination({ offsetArgument: "offset" }),
    },
  },
  keys: {
    recipe_bookmarks: (data) => `${data.user_id}:${data.recipe_id}`,
}
});

I can even use cache.resolve to see all the bookmarks that the user has:

        const keyofField = cache.resolve(
          cache.resolve(
            {
              __typename: "Query",
            },
            "users_by_pk",
            {
              id: args.where.user_id._eq,
            }
          ),
          "recipe_bookmarks",
          {
            order_by: { created_at: "desc" },
          }
        );

Returns correctly:

Array [
  "recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:447",
  "recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:414",
  "recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:418",
  "recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:423",
  "recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:445",
  "recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:446",
]

But how do I specify that I want to evict specifically for example the third bookmark:

"recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:418"

If I write cache.invalidate("recipe_bookmarks:d78d39ed-8c94-4f11-aed7-e326338dc593:418") then nothing happens either...

Sorry a bit confused, hope someone can help me. Here is a screenshot of my urql devtool. As you can see, each recipe_bookmark is under Query (this is for the button) but then also correctly found under the users_by_pk (to display the list of all the users bookmarks)

[Svarto]

To add some additional information after debugging, I have also tried to just cache.invalidate the recipe_bookmark that is on the toplevel in 'Query'. But even when I can correctly get the cache.keyOfEntity and then pass it into cache.invalidate - it is not removed from the cache nor is the list of bookmarks for a user (that should be referencing the same objects) updated...

        const keyField3 = cache.keyOfEntity({
          __typename: "recipe_bookmarks",
          user_id: args.where.user_id._eq,
          recipe_id: args.where.recipe_id._eq,
        });
        cache.invalidate(keyField3);

This is the query I am using to get the recipe_bookmark lists for each user:

export const GET_PROFILE_AND_ALL_RECIPES = gql`
  query GetAllUserRecipes($user_id: uuid!) {
    users_by_pk(id: $user_id) {
      username
      id
      recipes(order_by: { created_at: desc }) {
        difficulty
        dishtype
        created_at
        duration
        id
        user_id
        description
        title
        recipe_tags {
          tag {
            tag
          }
        }
        images {
          filename
          folder
          token
          user_id
        }
      }
      recipe_bookmarks(order_by: { created_at: desc }) {
        created_at
        recipe_id
        user_id
        recipe {
          difficulty
          description
          dishtype
          duration
          id
          images {
            folder
            filename
            token
            user_id
            created_at
          }
          title
          recipe_tags {
            tag {
              tag
            }
          }
        }
      }
    }
  }
`;

And this is the query that gets the recipe_bookmark status for the 'Query' level, I assume that they should be referencing the same object as I set the keys to be the same for recipe_bookmarks?

  query GetBookmarkStatus($user_id: uuid, $recipeId: Int) {
    recipe_bookmarks(
      where: {
        user_id: { _eq: $user_id }
        _and: { recipe_id: { _eq: $recipeId } }
      }
    ) {
      recipe_id
      user_id
    }
  }
`;

[Svarto]

For people that might run into the same problem, I solved this by instead using a writeQuery and writing an empty array / object into the place I wanted to delete. I guess the cache.invalidate does not work in nested places or on root objects as they werent removed properly.

      delete_recipe_bookmarks: (result, args, cache, info) => {
        cache.updateQuery(
          {
            query: GET_BOOKMARK_STATUS,
            variables: {
              recipeId: args.where.recipe_id._eq,
              user_id: args.where.user_id._eq,
            },
          },
          (data) => {
            if (!data) return null;
            data.recipe_bookmarks = [];
            return data;
          }
        );

        // I take the entire mutation and update only the parts I am interested in
        cache.updateQuery(
          {
            query: GET_PROFILE_AND_ALL_RECIPES,
            variables: { user_id: args.where.user_id._eq },
          },
          (data) => {
            if (!data) return null;
            // Filter out the recipe that was removed
            const newArray = data.users_by_pk.recipe_bookmarks.filter(
              (bookmark) => bookmark.recipe_id !== args.where.recipe_id._eq
            );
            // Add it back to the myrecipe view
            data.users_by_pk.recipe_bookmarks = newArray;
            return data;
          }
        );
      },