'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): enter image description here

enter image description here

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