API响应后在VueApollo中调用函数答案

【问题标题】：Calling function in VueApollo after API responseAPI响应后在VueApollo中调用函数
【发布时间】：2022-06-18 19:24:58
【问题描述】：

我正在使用 Vue 和 Apollo，我正在做一个看起来就像下面的框的查询。

在我得到 API 响应后，我想从我的方法对象中调用一个方法。但是 Vue 并没有让我在 apollo 对象中访问它。

我想知道如何调用我的方法之一，但只有在我确定我得到该响应之后，无需使用按钮或其他东西手动触发它。

apollo: { 
 materials: {
            query: gql`
                query allMaterials($tenantId: ID, $name: String) {
                    tenantMaterials(tenantId: $tenantId, name: $name) {
                        edges {
                            node {
                                name
                                materialType {
                                    name
                                    id
                                }
                                brand
                                vendor
                                size
                                unit
                                inventory
                                createdAt
                                updatedAt
                                isActive
                                updatedBy
                                id
                            }
                        }
                        totalCount
                    }
                }
            `,
            variables() {
                return {
                    name: null
                };
            },
            fetchPolicy: "cache-and-network",
            update: response => {
                return response.tenantMaterials.edges;
                //I want to call a function/method after this response
            },
            skip: false
        },
}

【问题讨论】：

标签： vue.js graphql apollo

【解决方案1】：

使用update(data) 或result(result, key)

update(data) {return ...} 自定义在 vue 属性，例如如果字段名称不匹配。

result(ApolloQueryResult, key) 是一个钩子，当结果是收到（请参阅 ApolloQueryResult 的文档（打开新窗口））。 key 是 apollo 选项中的查询键。

https://apollo.vuejs.org/api/smart-query.html

【讨论】：