graphql/apollo-angular/docs/caching/advanced-topics

[giscus[bot]]

graphql/apollo-angular/docs/caching/advanced-topics

Learn how to use Apollo Client to manipulate the cache directly for maximum control. Bypass the cache, update after mutation, use refetchQueries and fetchMore, and get full control with update.

https://the-guild.dev/graphql/apollo-angular/docs/caching/advanced-topics

[DzelmeRichards]

Hi,
I'm a bit confused. Maybe someone can help me understand this. I am building an app in angular 15 using "apollo-angular": "^4.2.0" and "@apollo/client": "^3.0.0".
I have a search form and search results components. In the results I have an infinite scroll. I get data from backend by chunks of 10, when user scrolls down, next 10 items are loaded. If I use fetchPolicy: 'network-only' everything works. I store data in an array.
this.feedQuery = this._apollo.watchQuery({
query: GET_DATA,
variables: {
input: this.obj,
},
fetchPolicy: 'network-only',
});
this.feedQuery.valueChanges.subscribe({...manualy set data in an array})

and fetch more
this.feedQuery
.fetchMore({
query: GET_DATA,
variables: {
input: this.obj,
cursor: this.endCursor,
},
})
.then((response) => {... I manually add new data to my data array}

But I need to take advantage of Apollo data caching feature.
I am trying to to use incremental loading
https://the-guild.dev/graphql/apollo-angular/docs/caching/advanced-topics
I have tried to store data in an observable and it works if i add
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
data: relayStylePagination(),
},
},
},
}
But I cant insert updateQuery in loadMore() function after variables. I get an error in IDE
Object literal may only specify known properties, and 'updateQuery' does not exist in type 'FetchMoreQueryOptions<unknown, any>'.
Can someone, please, help me figure this out?
Thanks in advance!
Richard