Calling function in VueApollo after API response

Viewed 81

I am using Vue and Apollo and I am making a querie that looks just like the box below.

After I get the API response, I would like to call a method from my methods object. However Vue, doesn't give me acess to it within apollo object.

I would like to know how can I call one of my methods, but only after I am sure I got that response, without having to manually trigger it with a button or something else.

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
        },
}
1 Answers

Use update(data) or result(result, key)

update(data) {return ...} to customize the value that is set in the vue property, for example if the field names don't match.

result(ApolloQueryResult, key) is a hook called when a result is received (see documentation for ApolloQueryResult (opens new window)). key is the query key in the apollo option.

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

Related