How to deal with Apollo cache between two caches

Get Help and Help Others
1

Hi all,

I’m currently working on an app that includes a task list. For this small feature I’m running into an issue that I’m looking against for a couple of days now.

I’ll try to explain what is happening:

I have a TasksCell that fetches all the tasks that are either completed or not completed depending on a prop with this query:

  query TasksQuery($completed: Boolean!) {
    tasks(completed: $completed) {
      __typename
      id
      title
      completedAt
    }
  }

In Apollo this ends up with the following two caches:

image
image482×582 52.6 KB

I want the system to work in such a way that when I check off an item it gets send to the other list. But without manually updating the cache the item just remains in view (But then with either a checked or unchecked status, the opposite of what it should be).

Next thing I tried was to manually delete the thing from the cache, and then when the user switches to the other list I hoped it would re-appear there. No joy with that either.

I’m not wondering is the only option that I have to “manually” delete the task from one cache list, and then add it to the other list?

Because if that is the case another issue comes up… When I add a new task, Apollo Cache decides to add it to both caches…

I really hope someone here can help me out a bit with this, because I’m out of ideas :see_no_evil:

If needed I can post more code, but since this was already a long post I didn’t want to include unneeded noise.

2

As always writing things down seems to work…

I got this thing to work by running a cache.modify like this:

  const [update] = useMutation(UPDATE_MUTATION, {
    update(cache, { data: { changeTaskStatus } }) {
      cache.modify({
        fields: {
          tasks(existingTasks = [], { readField, storeFieldName }) {
            if (
              storeFieldName === `tasks({"completed":${!!task.completedAt}})`
            ) {
              return existingTasks.filter((taskRef) => {
                return changeTaskStatus.id !== readField('id', taskRef)
              })
            } else {
              if (
                existingTasks.some(
                  (ref) => readField('id', ref) === changeTaskStatus.id
                )
              ) {
                return existingTasks
              }
              return [changeTaskStatus, ...existingTasks]
            }
          },
        },
      })
    },
  })

I’m really wondering if there would be a way to check which cache list you wanna use instead of relying on hacking the storeFieldName.

(I’m aware that this isn’t really a RedWood related issue, so feel free to close. By I have good faith in the knowledge of this community, so lets try!)

1 Like
3

@jvanbaarsen Sorry no one has replied to you. I’m not ignoring you, I just don’t know the answer to your question :frowning:

@dom you’re the Apollo Cache master :wink: (no pressure :stuck_out_tongue_winking_eye:) Can you help?

1 Like
4

I second Tobbe’s vote about Dom being our resident CacheMaster9000™

Sorry I’m of no help here either. All I know is that we talk/complain about caching multiple times a week ¯_(ツ)_/¯

pain == felt

5

@dom Would you happen to have any thoughts on this? :slight_smile:

6

@jvanbaarsen Super sorry I missed this! I’ll get to this in the next few days with an example app; definitely looks like a tricky one but I know what you’re going for, and feels like it’s possible.

1 Like