使用不同的变量运行Apollo Angular watchQuery返回缓存数据

如何解决使用不同的变量运行Apollo Angular watchQuery返回缓存数据

因此，我正在研究一个项目的功能，该功能允许用户基于不同的变量查看数据，例如，年份，位置，性别等唯一的数据。

下面是我编写的代码：

 this._querySubscription = this._apollo.watchQuery({                      
      query: *some graphql query*,variables: {
        // this is where the variables are dump 
      }
    })   
    .valueChanges        
    .subscribe(( { data,loading } ) => { 
      do something with the data                            
    })    

现在，不用担心函数和东西的错误，因为我已经做好了一切。我什至还有下面的代码来处理缓存甚至逐出。

let cache = this._apollo.client.cache as InMemoryCache
      
        let data = this._apollo.client.cache.readQuery({
          query: *some graphql query*,variables: { *using the same variables as the writeQuery,of course*}  
        })
        
        cache.evict({
          fieldName: "*the fieldname from the query*",broadcast: false,}); 
        
        this._apollo.client.cache
        .writeQuery({
          query: *some graphql query which is the same as above*,data,variables: {
            *again,same variables*      
          }  
        })

我遇到的一些事情是：

1. 如果不使用readQuery和writeQuery，则再次运行watchQuery时，即使使用不同的变量来运行查询，也会从缓存中返回相同的数据。
2. 使用readQuery，writeQuery，evict并使用不同的变量运行第二个查询不会从缓存（我正在寻找）中返回相同的数据，但是，如果我尝试先运行第一个查询回来，返回的数据将为空，可能是因为我修改了缓存。 3.如果您在运行查询时考虑使用fetchPolicy，我已经尝试了全部4 fetchPolicy， cache-first，network-only等。如果我使用cache-network-only则可以使用，但是以某种方式我不知道如何等待它完全完成请求并更新缓存，然后再更新UI 。

如果您能帮助解决此问题，或者有其他想法作为解决方案，将不胜感激

谢谢。

解决方法

使用Apollo时，我也遇到相同的问题。我解决的方法是创建一个单独的模块，该模块使用Factory处理所有Graphql内容，并在out方法上使用First Last Class Item Answer bob smith a 1 b bob smith a 2 a bob smith a 3 a jane jones a 1 c jane jones a 2 a jane jones a 3 b 。我确定您可以更改Unique_ID First Last Class Item Answer 1a bob smith a 1 b 1a bob smith a 2 a 1a bob smith a 3 a 2a jane jones a 1 c 2a jane jones a 2 a 2a jane jones a 3 b 以接受以下值之一： no-cache（值取自.watchQuery）。

我正在使用软件包的最新版本：

fetchPolicy

所以，这是模块：

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

watchQueryOptions.d.ts文件需要使用以下版本进行编辑，方法是添加以下行： "@apollo/client": "^3.2.4","apollo-angular": "^2.0.4","graphql": "^15.3.0",下的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"); } }

然后我在组件中调用查询：

tsconfig.json

让我知道这是否有帮助。我无法将所有这些信息发布为评论。