Apollo-boost caching issue

Question

I'm experiencing an issue with apollo client caching, and I'm not sure I understand why. I'm building an angular 6 app, using apollo-boost, all is working well. I have a scenario now where my a graphql query takes an id (of a user) and a filter string (used to filter records on the backend). The angular component code looks like:

ngOnInit() {
    this.filter$.subscribe(filterValue => {
        this.route.params.subscribe(this.getAppointments.bind(this, filterValue));
    });
}

The getAppointments function looks like:

getAppointments(filter: string, params: {id: string}) {
  this.artistAppointmentBookGQL.watch({artistId: user.artist._id, filter}).valueChanges
    .pipe(
      map(results => {
        // THIS ALWAYS RUNS WHEN THE FILTER CHANGES
        // HOWEVER THE RESULTS ARE ALWAYS THE LAST QUERY RUN
        // IF THE FILTER HAS BEEN RUN BEFORE
        console.log(user.artist._id, filter, results.data.artist.appointmentBook);
        return results.data.artist.appointmentBook;
    }));
}

The graphql query:

query artistAppointmentBook($artistId: ID!, $filter: String) {
  artist(id: $artistId, appointmentType: $filter) {
  _id
  appointmentBook {
    _id
    created_at
    firstName
    lastName
    date
    price
    stripe {
      charge {
        id
        amount
      }
    }
  }
}

The main issue:

I have 4 different possible filter values (all, unconfirmed, confirmed, paid). When I run these queries with each filter value, it works as expected, and I get back the proper result sets from the apollo server. However, as soon as I run the same query twice, I only get back the result of whatever the last query was, and no network call is made, presumably because it's using a cached version.

Shouldn't the cache be based on the variable inputs? It seems to run fine the first time I run with different variables, but as soon as one gets duplicated I only get back whatever the last call yielded. Thanks for any help!

This gif demonstrates the issue:

score 0 · Answer 1 · answered Sep 15 '18 at 18:01

Figured out my issue. As it should, apollo is caching the artist record because it has an _id and a type. The filter was being passed into artist query, when it should have been passed in at the appointmentBook level. I updated my schema to accept the filter param and then passed it in there instead of into the artist query.

Originally I had:

query artistAppointmentBook($artistId: ID!, $filter: String) {
  artist(id: $artistId, appointmentType: $filter) {
  _id
  appointmentBook {
    _id
    created_at
    firstName
    lastName
    date
    price
    stripe {
      charge {
        id
        amount
      }
    }
  }
}

Which needed to be changed to:

query artistAppointmentBook($artistId: ID!, $filter: String) {
  artist(id: $artistId) {
  _id
  appointmentBook(filter: $filter) {
    _id
    created_at
    firstName
    lastName
    date
    price
    stripe {
      charge {
        id
        amount
      }
    }
  }
}

After this update, the queries are cached properly.

Apollo-boost caching issue

1 Answers1