8/5 - 4주 프로젝트

Toy 45번 문제. to do later

프로젝트 30% 토이 난이도 어려운거 30% 피곤한거 40% .. 요즘 토이 손을 못 대겠다 ㅠㅠ

---

 

프로젝트 내에서 첫 Query 와 Mutation 요청에 성공! 정말 행복한 순간이었다 ㅠㅠ playground 에서의 요청이 아닌 직접 데이터를

 

받아서 사용해보았다. 

 

Query 요청과 Mutation 의 요청의 가장 큰 차이는 

Query 는 렌더 시 실행되고 Mutation 은 콜백 함수가 실행될 때 실행된다.

( 처음에는 query 는 get 같은 느낌이고 mutation 은 post 같은 것인 줄만 알았다. )

 

Query

 

먼저 gql 리졸버 함수 양식을 작성했다. 서버에서 지정해놓은 리졸버로 내가 필요한 정보를 직접 지정해서 가져올 수 있다.

import gql from 'graphql-tag';

export const MY_PROFILE = gql`
  query getMyProfile($id: Int!) {
    getUser(id: $id) {
      isMe
      user {
        nickName
        profileImage
        email
        provider
        pets {
          name
          animal
          breeds
          profileImage
        }
      }
    }
  }
`;

 

Query 문에 가장 재밌는 점은 loading , error , data 를 인자로 가지고 시작해서 data 의 상태에 따라 세가지 상황에 맞는 컴포넌트를

 

리턴해준다. data 가 넘어오기 전에는 loading 에 리턴값을 , 문제가 있다면 error 의 리턴 값을 , 그리고 data 가 넘어오면 그 때

 

필요한 컴포넌트를 렌더할 수 있다. 렌더 바로 밑에서 Query 태그로 전체를 감싸고 data 에서 메인으로 쓸 컴포넌트를 리턴한다.

render() {
    
    return (
      <Query<Data, Variables> query={MY_PROFILE} variables={{ id: personalId }}>
        {({ loading, error, data }: any) => {
          if (loading) return <Loading />;
          if (error) return <Err />;
          console.log(data);

          return (

여기서 query 는 리졸버 함수를 적어주고 variables 에는 리졸버 함수에 전달할 인자를 넣어준다. 

variables 를 인자로 받는 리졸버의 리턴 값이 data 로 넘어온다.

 

Mutation

 

역시 리졸버 함수양식을 작성한다.

export const CHANGE_NICKNAME = gql`
  mutation nickNameChange($newNickName: String!) {
    changeNickName(newNickName: $newNickName) {
      success
      err
    }
  }
`;

요청을 실행하는 태그를 Mutation 태그로 감싸고 Query 와 같이 리졸버를 mutation 으로 , 인자를 variables 로 받는다.

<Mutation<getPassNew, postPassNew>
	mutation={CHANGE_PASSWORD}
	variables={{
	password: this.state.newPW,
		}}>

리졸버 함수를 콜백함수로 받는 요청을 실행시킬 동작(함수) 에 event 와 함께 인자로 넘긴다.

 {changePassWord => (
	<Input
	onPressEnter={e => {
	this.updatePassword(e,changePassWord);}}
		onChange={this.onchangeNewPassWord}/>
)}
</Mutation>

Query 요청에 형식은 어느정도 이해가 갔지만 아직 Mutation 은 익숙하지도 이해가 완벽히 가지도 않아서 더 많이 익숙해질 필요가 있다.