GraphQL 장점

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const { loading, data } = useQuery(FETCH_POSTS_QUERY);

const FETCH_POSTS_QUERY = const FETCH_POSTS_QUERY = gql`
{ getPosts {
id
body
createdAt
username
likeCount
likes
commentCount
comments}};

node와 함께 graphQL-Apollo로 백엔드만 구축할 때에는 장점을 잘 모르고 있었다.
처음으로 front에서 쿼리요청을 보내보니 !!!!!! 엄청 편리하다는 생각이들었다.

객체를 반환할 때 저장된 데이터 Object에서 원하는 값을 선별해서 받아올 수 있었다.

redux가 필요없다. 요청을 통해 원하는 Object를 그대로 받아오면된다. loading 상태와 받아올 data가 useQuery 객체에 모두 담겨있다.

useMutation

업데이트 수정 삭제 등의 요청이 필요할 때 사용하는 mutation 요청이다.

import { useMutation } from '@apollo/react-hooks';

const [loginUser, {loading}] = useMutation(LOGINUSER, {
update (,result) {
// result는 요청해서 받아온 데이터 객체가 담겨있다. update 함수내의 값들은 요청이 이루어지고 난 후 실행이 되고 바로 적용된다. redux를 사용할 때에는 데이터를 받아와도 즉시 적용이 안되고 새로고침을 해야 적용되는 경우가 많아서 번거로울 때가 많았는데 매우 편리하다.
},
onError(err) {
요청에 대한 오류가 있을때 error를 관리할 수있다.
},
variable : {질의로 보내기 위한 변수를 포함한 객체}
});

function login() {
// mutation 요청을 받아오기 위해 실행하는 함수이다.
loginUser()
}

const LOGIN_USER = gql mutation login($username: String!, $password: String!) { login(username: $username, password: $password) { id email username token createdAt } };

위 요청 방법은 입력값에 대한 type을 번거롭게 두번 선언해주는 느낌이다.
좀 더 사용하다보면 이유를 알 수 있을 것 같다.

비구조화 할당에 대한 고찰

이것 때문에 지금까지 javascript 문법에 대한 생각이 꼬여 굉장히 고민을 했던 코드가 있었다. 복잡했던 코드인데 엄청 간단하게 쪼개서 만들어보면 결국 이 부분에 대한 고민이었다.

function add() {
const hi = 1
return {hi}
}

const {hi} = add()
console.log(hi)

당연히 답은 1이 나온다. 난 그보다 콘솔을 찍으면 값이 나온다는 게 놀라웠다.
add함수를 실행해주지 않으면 콘솔이 찍히지 않는다는 생각이었는데 비구조화할당은 add함수에서 return된 객체를 사용할 수도 있으면서 동시에 함수를 실행한다.
그래서 useState, useQuery등의 객체들도 바로 사용가능한거구나 부터 시작해서 어려운 코드를 이해할 수 있게 되었다. 생각 없이 익숙해진 코드들을 사용하고 있었구나 생각하며 반성하게 되었다.