Situation:

I am using laravel-graphql as a backend GraphQL service and vue-apollo as a frontend client.

In my Vue component I have a gql query as follows: (relation: A Song has more SongParts)

const getSong = gql`
    query FetchSong ($id:Int!){
        song(id: $id) {
            id,
            name,
            authors_lyrics,
            authors_music
            song_parts{
                type
                lyrics
            }
        }
    }`;

Now there's a mutation that i want to use to update given song:

const updateSong = gql`
    mutation updateSongMutation ($id:Int!,$name:String,$authors_lyrics:String,$authors_music:String, $song_parts: [SongPart]) {
        updateSongMutation(id: $id, name: $name, authors_lyrics: $authors_lyrics, authors_music: $authors_music, song_parts: $song_parts) {
            id
        }
    }`;

.. and in the Vue component used this way:

methods: {
            save: function(){
                this.$apollo.mutate({
                    mutation: updateSong,
                    variables: this.songData,
                }).then((result) => {
                    console.log(result);
                }).catch((error) => {
                    console.log(error);
                })
            }
        },

However, to update the song_parts array I need to define a custom input type:

input SongPart{
    id: Int!
    lyrics: String
}

Problem

I can't figure out, where to define this input type. When I'm using GraphiQL in Chrome WebTools, there's no problem defining it in front of the mutation. I also found some info for apollo server, but I need it in the client.

So basically the problem is about mutating a list of data.