Using alternate variables in the watchQuery() function in Apollo Angular will generate the cached data

Question

Using alternate variables in the watchQuery() function in Apollo Angular will generate the cached data

Currently, I am implementing a feature in my project that allows users to access and analyze data based on various parameters such as year, location, and gender.

Below is the code snippet that I have developed for this feature:

 this._querySubscription = this._apollo.watchQuery({                      
      query: *insert specific GraphQL query here*,
      variables: {
        // here we define the necessary variables for the query 
      }
    })   
    .valueChanges        
    .subscribe(( { data, loading } ) => { 
      perform actions with the retrieved data                            
    })

No need to fret about any errors related to function implementation as everything has been carefully set up. In fact, I also have additional code to manage cache handling and eviction.

let cache = this._apollo.client.cache as InMemoryCache
      
        let data = this._apollo.client.cache.readQuery({
          query: *specific GraphQL query*,
          variables: { *using the same variables as defined above*}  
        })
        
        cache.evict({
          fieldName: "*field name from the query*", 
          broadcast: false,
        }); 
        
        this._apollo.client.cache
        .writeQuery({
          query: *specific GraphQL query matching previous*,
          data,
          variables: {
            *reuse same variables*      
          }  
        })

Throughout the process, I have encountered some key observations:

Re-running the watchQuery without utilizing readQuery or writeQuery will result in fetching the same cached data even when different variables are provided.
On the other hand, employing readQuery, writeQuery, and evict before executing a new query with altered variables prevents retrieving the same data from the cache. However, attempting to re-run the initial query afterwards may lead to an empty dataset due to potential modifications made to the cache.
If considering the use of fetchPolicy, experimenting with all available options like cache-first and network-only revealed satisfactory outcomes with cache-network-only. Nevertheless, ensuring completion of request and cache updates before UI modification remains a challenge.

angular typescript apollo apollo-angular

Answer 1

Answer №1

After facing a similar problem, I managed to find a solution by utilizing the

this._querySubscription.refetch(newVariables)

function. This method eliminated the need for manual cache deletion and made the process much smoother.

Answer 2

After facing a similar problem, I managed to find a solution by utilizing the

this._querySubscription.refetch(newVariables)

function. This method eliminated the need for manual cache deletion and made the process much smoother.

Answer 3

Answer №2

Dealing with the same issue while using Apollo, I found a solution by creating a dedicated module to manage all GraphQL operations with a Factory and implementing a no-cache approach on the .watchQuery method. It's possible to modify the fetchPolicy setting to allow one of these values:

'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby' | 'cache-and-network'

(Taken from watchQueryOptions.d.ts).

I'm currently utilizing the most recent versions of the following packages:

"@apollo/client": "^3.2.4",
"apollo-angular": "^2.0.4",
"graphql": "^15.3.0",

Below is the module setup:

import { NgModule } from '@angular/core';
import { InMemoryCache } from '@apollo/client/core';
import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';

import { HttpLink } from 'apollo-angular/http';

export function createApollo(httpLink: HttpLink) {
    return {
        link: httpLink.create({
            uri: "/api/...",
            withCredentials: true
        }),
        cache: new InMemoryCache(),
        credentials: 'include',
    };
}

@NgModule({
    exports: [],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink],
        },
    ],
})

export class GraphQLModule {
    constructor(
        apollo: Apollo,
        httpLink: HttpLink
    ) {
        apollo.create({
            link: httpLink.create({
                uri: "/api/...",
                withCredentials: true
            }),
            cache: new InMemoryCache()
        }, "network");
    }
}

Edit the tsconfig.json file with the necessary versions by adding this line:

"allowSyntheticDefaultImports": true

under compilerOptions

To execute the query in a component:

this.apollo
    .watchQuery({
        query: your_query,
            variables: {
                ...your_variables
            },
            returnPartialData: false,
            fetchPolicy: "no-cache" // <----- You may need to change that as I wrote above

        }).valueChanges
        .subscribe((data: any) => {
          foo();
        });

Answer 4

Dealing with the same issue while using Apollo, I found a solution by creating a dedicated module to manage all GraphQL operations with a Factory and implementing a no-cache approach on the .watchQuery method. It's possible to modify the fetchPolicy setting to allow one of these values:

'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby' | 'cache-and-network'

(Taken from watchQueryOptions.d.ts).

I'm currently utilizing the most recent versions of the following packages:

"@apollo/client": "^3.2.4",
"apollo-angular": "^2.0.4",
"graphql": "^15.3.0",

Below is the module setup:

import { NgModule } from '@angular/core';
import { InMemoryCache } from '@apollo/client/core';
import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';

import { HttpLink } from 'apollo-angular/http';

export function createApollo(httpLink: HttpLink) {
    return {
        link: httpLink.create({
            uri: "/api/...",
            withCredentials: true
        }),
        cache: new InMemoryCache(),
        credentials: 'include',
    };
}

@NgModule({
    exports: [],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink],
        },
    ],
})

export class GraphQLModule {
    constructor(
        apollo: Apollo,
        httpLink: HttpLink
    ) {
        apollo.create({
            link: httpLink.create({
                uri: "/api/...",
                withCredentials: true
            }),
            cache: new InMemoryCache()
        }, "network");
    }
}

Edit the tsconfig.json file with the necessary versions by adding this line:

"allowSyntheticDefaultImports": true

under compilerOptions

To execute the query in a component:

this.apollo
    .watchQuery({
        query: your_query,
            variables: {
                ...your_variables
            },
            returnPartialData: false,
            fetchPolicy: "no-cache" // <----- You may need to change that as I wrote above

        }).valueChanges
        .subscribe((data: any) => {
          foo();
        });

Using alternate variables in the watchQuery() function in Apollo Angular will generate the cached data

Answer №1

Answer №2

Similar questions

The process of implementing ngOninit with asynchronous data involves handling data that may take

Encountering an error of undefined upon submission of a form while utilizing ng

Currently, I am working with Angular 11 and encountered some errors while trying to embark on a new project

Typescript may fall short in ensuring type safety for a basic reducer

Leveraging services in Angular: accessing directly in view or via component

Encountering the error "Unable to access the 'user' property of an undefined object when working with Angular and Firebase

What is the best way to compare dates for a deadline using Angular and CSS?

Having trouble executing the typescript build task: Command 'C:Program' is not valid as an internal or external command

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

Making sure to consistently utilize the service API each time the form control is reset within Angular 4

Determine an expression based on a string in Typescript

ReactJS tweet screenshot capture

Using Angular 2 to assign unique ids to checkbox values

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

Setting up a ts-node project with ECMAScript modules. Issue: Unrecognized file extension ".ts"

I encountered an issue while trying to install the latest version of AngularFire, receiving an error

Looking for a way to dynamically append a child element within another child

Why won't T.chain chain properly in Effect-ts?

What is the best way to ensure that a class instance only receives the necessary properties?

The loading time for the Docker index HTML file page is unacceptably slow