vue-apollo 클라이언트에서 GraphQL 입력 유형을 정의하는 방법

vue-apollo 클라이언트에서 GraphQL 입력 유형을 정의하는 방법

상황:

laravel-graphql을 백엔드 GraphQL 서비스로, vue-apollo를 프런트엔드 클라이언트로 사용하고 있습니다.

Vue 컴포넌트에는 다음과 같은 gql 쿼리가 있습니다(관계:A Song에는 더 많은 Song Parts가 있습니다.

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을 사용하면 변환 앞에서 정의하는 데 문제가 없습니다.아폴로 서버에 대한 정보도 찾았지만, 클라이언트에 필요합니다.

따라서 기본적으로 문제는 데이터 목록을 변환하는 것입니다.

입력 유형은 서버의 스키마 내에 정의되어 있어야 합니다.larabel에 대해서는 잘 모릅니다만, larabel-graphql 의 메뉴얼을 보면, 입력이 통상의 타입과 같이 정의되고 있는 시점에서, 이 설정을 실시하면,$inputObjecttrue로 설정합니다.이 예를 참조해 주세요.그럼 안에 있는 당신의 타입에 그것들을 추가할 수 있을 겁니다.config/graphql.php일반 타입과 함께.

입력의 이름을 다음과 같은 것으로 바꾸는 것도 추천합니다.SongPartInputSongPart 타입이 있으면 헷갈리지 않으실 거예요.

언급URL : https://stackoverflow.com/questions/45332321/how-to-define-graphql-input-type-in-vue-apollo-client