Currently, I am engaged in a fresh project utilizing vue along with vue-apollo.
There is one component dedicated to displaying the user's name (UserShow.vue):
<template>
<div v-if="!this.$apollo.queries.user.loading">
Your name is: {{user.firstname}}
</div>
</template>
<script>
import gql from "graphql-tag";
export default {
apollo: {
user: {
query: gql`{
user (id: 1) {
id
firstname
}
}`
}
}
}
</script>
Additionally, there exists another component specifically for editing purposes (UserEdit.vue):
<template>
<div v-if="!this.$apollo.queries.user.loading">
Edit your name: <input v-model="user.firstname" />
</div>
</template>
<script>
import gql from "graphql-tag";
export default {
apollo: {
user: {
query: gql`{
user (id: 1) {
id
firstname
}
}`
}
}
}
</script>
Both of these components are displayed on the same page without any involvement of mutations. These simple components encapsulate the functionality.
Upon modifying the name within the input field, the username gets automatically updated in the View.
This behavior seems peculiar and not something that aligns with my preferences.
Apollo conducts the query and populates the vue data() property for each component. However, I find it odd how the data appears to be shared to some extent. The data in a vue component ought to remain private unless explicitly passed to a subcomponent (as done with v-model in the input field).
Upon inspecting the Apollo Dev Console and delving into the Cache, the change in firstname does not seem to reflect there. So, how exactly is this functioning?
If this behavior is not desired, there seems to be only one unusual solution:
An extra attribute can be included in the query as shown below:
<template>
<div v-if="!this.$apollo.queries.user.loading">
Edit your name:
<input v-model="user.firstname" />
</div>
</template>
<script>
import userQuery from "./user";
import gql from "graphql-tag";
export default {
apollo: {
user: {
query: gql`{
user (id: 1) {
id
firstname
age // added to create a different query
}
}`
}
}
}
</script>
Incorporating "age" into the query brings about a change in behavior. This alteration appears even more puzzling! How can reliable components be constructed given such a behavior? Have I overlooked a crucial concept?
The source code can be accessed here: https://github.com/kicktipp/hello-apollo
Bug or feature?