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

Question

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

下面是我写的代码：

 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*      
          }  
        })

我遇到的一些事情是：

如果不使用readQueryand writeQuery，当watchQuery再次运行时，即使使用不同的变量来运行查询，也会从缓存中返回相同的数据。
使用readQuery, writeQuery,evict并使用不同的变量运行第二个查询不会从缓存中返回相同的数据（我正在寻找）但是，如果我尝试运行第一个查询，数据返回将为空，可能是因为我修改缓存。3.如果您在运行查询时考虑使用fetchPolicy，我已经尝试了所有 4 fetchPolicy，等等。如果我使用它可以工作，cache-first但不知何故我不知道如何等待它完全完成发出请求并在我之前更新缓存可以更新我的用户界面。network-onlycache-network-only

score 0 · Accepted Answer

我刚刚解决了您遇到的类似问题，诀窍是致电this._querySubscription.refetch(newVariables). 这样您就不必手动删除缓存。

score 0 · Accepted Answer

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

"@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文件需要通过添加以下行来使用这些版本进行编辑： "allowSyntheticDefaultImports": true在compilerOptions

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

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();
        });

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

2 回答 2

Related

Reference