graphql+react 변수를 가지고 Mutation 실행하기

 

const mutation = gql`
    mutation AddSong($title:String){
        addSong(title:$title){
            title
        }
    }
`;

export default graphql(mutation)(SongCreate);

 

 

지난번 쿼리 처럼 react-apollo의 graphql 함수를 활용해 mutation문을 사용해 Songcreate 라는 컴포넌트에 

연결시켰다.  문제는 별개인 컴포넌트(SongCreate) 와 mutation 쿼리 둘사이에서 

컴포넌트가 mutation에게 title이라는 변수를 줘야한다는것이다.

 

 

우선 이렇게 되면 컴포넌트의 this.props에 mutate 라는 함수가 prop에 생긴다

이 mutate를 사용해서 별개인 컴포넌트와 mutation 쿼리 사이에 연결이 가능해져

변수를 줄수가있어진다.

 this.props.mutate({
            variables:{
                title:this.state.title
            }
           
        });

또한 해당 mutation을 실행시켜 서버와 작용한다.

mutation은 서버와 작용후에 결과값을 리턴한다. true false 든 어떤 데이터든 혹은 에러가 발생시 에러가 리턴될것이다.

이를 then 을 활용하면 가능 하다

this.props.mutate({
            variables:{
                title:this.state.title
            }
           
        }).then((data)=>{
            console.log(data);
            hashHistory.push('/');
        });

그럼 만약 한 컴포넌트에서 mutation과 쿼리를 동시에 사용하려면 어떻게할까?

SongList 라는 컴포넌트는 song 들을 쿼리하고 동시에 삭제할수있는 기능 이 필요하다

const mutation = gql`
    mutation deleteSong($id:String){
        deleteSong(id:$id){
            id
            title
        }
    }
`;




export default graphql(mutation)(
graphql(query)(SongList));

다음과같이 이상한 형태로 뮤테이션,쿼리를 같이 할수있다.