'How to write mutations in Vue-Apollo using Graphql-Neo4j as backend
I am stuck with the Vue-Apollo documentation: How to send mutations to my grahql-node4j server backend. For some reason the querying part works but I can't mutate new data to my neo4j backend.
I couldn't really understand the documentation (https://apollo.vuejs.org/guide/apollo/mutations.html#server-side-example), do I need to define a scheme/type for mutations (because I thought this is done by vue-apollo like the query automatically)? What I am doing wrong here?
Here is my Apollo-server index.js file and the schema "Dogs" defined:
const { Neo4jGraphQL } = require("@neo4j/graphql");
const { ApolloServer, gql } = require("apollo-server");
const neo4j = require("neo4j-driver");
const typeDefs = gql`
type Dogs {
name: String
}
`;
const driver = neo4j.driver(
"bolt://localhost:7687",
neo4j.auth.basic("neo4j", "test")
);
const neoSchema = new Neo4jGraphQL({ typeDefs, driver });
neoSchema.getSchema().then((schema) => {
const server = new ApolloServer({
schema,
});
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
})
And my Vue application using Vue-Apollo:
<template>
<div class="hello">
<div v-for="dog in dogs" :key="dog.name">{{dog.name}}</div>
<input type="text" v-model="dogName">
<button @click="onClicked">Press me</button>
</div>
</template>
<script>
import gql from 'graphql-tag';
export default {
name: 'HelloWorld',
methods: {
async onClicked() {
// console.log(this.dogname)
await this.$apollo.mutate({
// Query
mutation: gql`mutation ($label: String!) {
addDog(name: $label) {
name
}
}`,
// Parameters
variables: {
label: this.dogName,
},
})
}
},
apollo: {
dogs: gql`query {
dogs {
name
}
}`,
},
data() {
return {
dogName: ""
}
}
}
</script>
...
As shown below the data is loaded to my application properly but when I press the button it should mutate the textfield to my neo4j server but it doesn't show something new in my neo4j server (I know I need to reload my page to see it):
Some additional info when I added the vue-apollo plugin I did not select to use a vue-apollo server and example code. Instead I am using the vue-apollo server example from the documentation here: https://neo4j.com/docs/graphql-manual/current/getting-started/.
Many thanks for your help!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|