【问题标题】:apollo client delete from store without mutation阿波罗客户端从商店中删除而没有突变
【发布时间】:2018-01-13 23:33:51
【问题描述】:

我需要通过 id 从本地存储中删除“记录”而不使用突变,因为服务器不支持突变。

我曾尝试像这样手动访问商店:

delete this.apolloClient.store.getState().apollo.data['1112']

这会删除记录,但是当我要求 apollo 获取项目时,它会转到服务器,就像没有缓存一样。

顺便说一句,如果我不删除我只是更新这样的原始属性之一:

this.apolloClient.store.getState().apollo.data['1112'].name = 'XXX'

然后一切正常,数据更新,apollo 继续使用缓存

我知道我应该使用突变,但我不能。

我只需要本地更新

【问题讨论】:

    标签: javascript graphql apollo apollo-client


    【解决方案1】:

    我找到了 2 个解决方案:

    查询:

    stores {
     products {
      totalCount
      list {
      }
     }
    }
    

    **如果你知道确切的变量:**

    const query = gql(query);
        const data = apolloClient.readQuery({ query, variables:{limit:100, offset: 0} });
    
        let removedProduct = _.remove(data.stores.products.list, function(product: IProduct) { return product.id === productId; })
        data.stores.products.totalCount = data.stores.products.list.length;
    
        apolloClient.writeQuery({
            query,
            variables:{limit:100, offset: 0},
            data: data
        });
    

    如果你想在所有地方删除

    let dataStore = apolloClient.store.getState().apollo.data;
        let productsStore = dataStore[dataStore['ROOT_QUERY'].stores.id];
        let product = dataStore[productId];
    
        //remove product from cache index
        Object.keys(productsStore)
            .map((key: any) => dataStore[productsStore[key].id])
            .forEach((products: any) => {
                _.remove(products.list, (product) => product.id === productId);
                products.totalCount = products.list.length;
            });
    
        //remove product's complex fields (array/objects) from cache
        Object.keys(product).map((key: any) => {
            if (Array.isArray(product[key])) {
                return product[key].map((item) => item.id);
            } else if (typeof product[key] === 'object') {
                return product[key].id;
            }
            return null;
        }).forEach((productField) => {
            if (Array.isArray(productField)) {
                productField.forEach((key) => delete dataStore[key]);
            } else if (productField) {
                delete dataStore[productField];
            }
        });
    
        //remove product from cache
        delete dataStore[productId];
    

    【讨论】:

    • 在解决方案#1中,为什么我们需要writeQuery(),在我的情况下_.remove()就足够了。
    猜你喜欢
    • 2019-04-19
    • 2021-01-19
    • 2019-02-09
    • 2019-01-13
    • 2019-04-02
    • 2017-03-23
    • 2019-02-15
    • 2018-05-06
    • 2019-05-02
    相关资源
    最近更新 更多