Update multiple reactive vars but only refetch queries once?

Client SDKs
,
1

I have a relatively complex client-side data model with multiple collections of objects backed by reactive vars.

I also have an expensive local search resolver that relies on multiple of those reactive vars to search through the local state.

My issue is that when I run some updater function to mutate the state by setting reactive variables, I set multiple different reactive variables which are used in the search resolver. Rather than waiting for the entire update function to complete and then refetching the search query once, Apollo seems to be refetching the query for every reactive variable mutation.

Is there an elegant way to batch multiple reactive variable updates together and only rerun local queries a single time?

As a contrived example:

Query:

query SearchExample($color: String, $name: String) {
  search(color: color, name: name) {
    object {
      id
    }
  }
}

Local read function:

search(_, args) {
  return list.find(x => {
    // x.color and x.name are reactive vars
    return x.color() === args.color && x.name() === args.name;
  })
}

Update function:

const updateNameAndColor = (color, name) => {
  someObject.color(color);
  someObject.name(name);
}

I haven’t actually run this exact code, but I’m reasonably certain the update function will re-fetch the search query twice. Is there any way around this?

2

This should be possible with cache.batch:

cache.batch({
  update(c) {
    someObject.color(color);
    someObject.name(name);
  },
});
1 Like