如何在 vue-apollo 客户端中定义 GraphQL 输入类型

Question

情况：

我正在使用 laravel-graphql as a backend GraphQL service and vue-apollo 作为前端客户端。

在我的Vue组件中我有一个gql查询如下：（关系：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
            }
        }
    }`;

现在我想使用一个突变来更新给定的歌曲：

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
        }
    }`;

.. 并且在 Vue 组件中这样使用：

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

但是，要更新 song_parts 数组，我需要定义自定义输入类型：

input SongPart{
    id: Int!
    lyrics: String
}

问题

我不知道在哪里定义这种输入类型。当我在 Chrome WebTools 中使用 GraphiQL 时，在突变前定义它没有问题。我还找到了一些关于 apollo 服务器的信息，但我在客户端需要它。

所以基本上问题是关于改变数据列表。

Answer 1

您的输入类型仍应在服务器上的架构中定义。我对 laravel 不太熟悉，但是查看 laravel-graphql 的文档，看起来目前输入的定义就像常规类型一样，您只需设置 $inputObject 属性为真。请参阅示例 here。我想您随后会将它们与常规类型一起添加到 config/graphql.php 中的类型中。

我还建议将输入重命名为类似 SongPartInput 的名称，这样如果您也有 SongPart 的类型就不会感到困惑。

如何在 vue-apollo 客户端中定义 GraphQL 输入类型

How to define GraphQL input type in vue-apollo client

apollo

graphql

vuejs2

apollo-client

vue-apollo

情况：

问题