[GraphQL/Apollo] 실무에서 활용할 수 있는 local state(query, data Write by frontend)

Hyo Kyun Lee·2021년 8월 27일
0

GraphQL/Apollo

목록 보기
2/7

1. local state

  • 외부적으로 넘겨받은 정보를 local에서 관리하는 방식
  • 백엔드에서 넘겨받은 정보를 프론트엔드에서도 같이 관리하는 방식

보통은 API를 통해 넘어온 외부 data를 수정하거나 바꾸는 작업을 말한다.

여기서 해당하는 API는 우리가 작성하였던 query와 동일하다.
해당 query(getmovie나 seemovie에 해당)를 통해 전달받은 data를 수정하거나 다른 data를 추가하는 작업을 진행한다.

2-1. local state logic 확인

전체적인 local state logic을 어떻게 구성할 것인지 먼저 확인한다.

  • Home 화면에서 LIKE 버튼을 구성하고, 이 LIKE 버튼을 클릭하면 해당 상태정보를 별도 변수에 저장한다.
  • 이 변수를 이미지를 클릭하였을 때 응답받는 query 정보(getmovie)에 추가한다.

  • Home 화면에서의 LIKE 버튼을 클릭하면 isLike 변수에 해당 상태정보를 저장한다.

  • 해당 변수정보를, Home 화면에 대한 query 응답에 추가 저장한다.
  • 즉 Home 화면을 구현하기 위해 전달된 getmovie query와, 이에 대한 응답정보인 각각의 Movie 객체들에 isLiked 변수 정보를 추가 저장하는 logic을 구현한다.

2-2-1. apollo client에서 query 정의하기

resolvers : Query Update by frontend

ApolloClient의 resolvers에 변수를 추가한다.

  • resolvers 자체가 기본적으로 GraphQL/백엔드 등에서 요청한 명령 및 API에 대해 전달받은 응답/결과를 의미한다.
  • 즉 Apollo측이 GraphQL로부터 전달받은 변수를 지정, 다시 말해 프론트엔드에서 지정해주는 과정이다.

일단 해당 Query에 isLiked 정보를 담는 것이 중요하다.

  • 이때 isLiked 변수(여기서는 함수)를 Query 정보에 담는 것은 프론트엔드(resolvers)에서 추가하는 것으로, 백엔드에서 추가하는 것이 아니다.

Apollo 자체적으로 Query를 정의하는 logic과 이에 대한 resolver logic 모두 구성해야 하며, Apollo query임을 인식할 수 있도록 알려주어야 한다.

  • 이는 GraphQL query를 정의하는 방법과 매우 유사하다.
  • ApolloClient에서 resolvers에 정의된 객체에 해당 변수 추가(resolver).
  • Home에서 GraphQL server에 전달해주는 Query에 해당 정보를 추가한다(정의).

  • apollo.js에서 정의된 client 정보에 resolvers option을 추가한다.
  • ※ 이러한 Query, option을 추가하는 일이 실무에선 자주 일어날 수 있으므로 apolloclient에 대한 directory를 별도로 생성하여 관리하는 이유이다.
  • 설정 후 추가할 변수(Query응답을 통해 추가적으로 받을 정보가 담겨지는 곳)를 설정해준다(=isLiked).

  • 어떤 객체/변수에 정보를 추가하고 싶은지 설정해주는데, 위와 같이 GraphQL의 응답 type을 확인하거나 Apollo cache를 확인해본다.

2-2-2. Query를 사용할 Component에서 Query 구성하기

  • Query를 사용할 Home화면 Component에서 gql을 이용하여 Query를 구성한다.
  • 위에서 기술한 원리에 따라 백엔드가 아닌, apollo에서 query를 인식하도록 @client 인자를 붙여 기재한다.
  • Apollo로 보내줄 query에 추가한 변수를 설정(isLiked)해주고, 인식할 수 있도록 @client 설정까지 완료해주면 Query 응답을 통해 해당 변수정보를 얻을 수 있다.

2-2-3. 화면에 구현하기(1차 Query 확인)

Query를 통해 전달받은 isLiked 변수를 전달하고 이를 화면에 구현한다.

  • Home에서 Query 응답을 통해 받아온 data 내부에서 isLiked 변수를 확보한다.
  • 이를 Movie component에 전달해서 Home화면이 isLiked 변수 상태를 나타내도록 구현한다.

  • 화면에 정상적으로 구현되었는지 확인한다.

2-2-4. log 확인

console.log나 Apollo cache 정보를 통해서 추가한 isLiked 변수 정보를 확인할 수 있다.

  • useQuery를 통해 받은 Query 응답에 isLiked 변수와, 변수에 해당하는 값이 정상적으로 전달되었는지 확인해본다.

  • console.log에서 정보 전달되었음을 확인하였다(기본값은 false로 설정).

  • Apollo log에서 정보 전달되었음을 확인하였다.

3-2. Mutation local query 추가하기

Query에 추가적인 정보를 얻기 위해 이에 대한 변수를 프론트엔드에서 지정해주었다.

다음은 이 변수를 local(프론트엔드) 부분에서 어떻게 변화시킬 것인가에 대한 logic이다.

Mutation local query의 의미는 말 그대로 local, 즉 프론트엔드(쉽게 말하면 사용자 관점)에서 query를 수정함으로써 내부 data를 update까지 할 수 있는 query를 작성한다는 의미이다.

쉽게 말하면 위 과정에서 기술한 local state 원리와 비슷하게, 프론트엔드에서 API(=사용자가 정한 query)로부터 얻은 data를 바꾸는 명령을 추가해주는 것이다.

Apollo client에 Mutation을 추가하여 data modify / update가 가능하다.

  • 위에서 기술한 local query와 마찬가지로 Apollo client에서 Mutation을 정의하고, 이에 대한 resolver(=Mutation)을 생성하는 과정을 해주면 된다.

3-2-1. apollo client에서 Mutation query 정의하기

위에서는 resolver에서 단순히 isLiked의 변수 값을 전달받는 query를 작성했다면,
지금은 해당 isLiked 변수값을 Mutation(수정)하는 query를 작성한다.

  • 기본적으로 client에서 query 정의를 완료한 후 다른 component에서 logic을 연결하거나 구상하는 순서로 진행하는 것이 좋다.
  • resolvers 내의 Mutation 항목을 별도로 구성한 후, 내부에서 실질적인 Mutation 함수 logic을 작성한다.

  • 전달인자를 작성하는 방식(객체전달)은 GraphQL에서 전달한 방식과 매우 유사하다.
  • 일단 1차적으로 triggerLike 함수를 정의해서, id인자가 잘 전달되는지 log 출력을 확인하는 logic을 구현한다.

3-2-2. query을 사용할 component에서 Query 구성하기

  • 정의한 Query를 사용할 component에서 Query를 생성해준다.
  • 이때 사용하는 mutation query는 인자를 전달받기 때문에, 이전 인자를 전달받는 query 구성방식을 참조해서 진행한다(#3-2-1. 데이터를 전달받은 Query 구성).

  • useMutation을 활용해서(*useQuery 아님) 구성한 Query에 인자를 전달하고, 이를 호출할 변수를 설정해준다.
  • GraphQL query의 경우와 달리 변수를 별도 설정해준다(*by 배열).
  • ※ 단순히 GraphQL query를 사용할 경우 바로 비구조화해서 사용하지만, mutation query의 경우 변수를 통해 사용한다는 점 기억(#3-2-2. useQuery를 통한 query 전달받기 및 data 받기)

3-2-3. 화면 구현하기 (2차 Query 확인)

Query를 호출해서 1차적으로 구성한 mutation query가 잘 작동하는지 확인한다.

  • Home 화면에 나타난 Component를 클릭하면 Mutation query가 호출되면서 id값을 log를 통해 정상적으로 출력하였다.

  • Apollo cahce에서도 해당 Mutation이 정상적으로 호출 및 출력되었다.

3-3. 변수를 바꾸는 최종 logic 구현하기

지금까지 한 과정을 정리하면 다음과 같다.

  • isLike 변수에 대한 정보를 getmovie query에 추가하여 Apollo cache에 저장하였다.
  • Mutation Query를 추가하였다.

마지막으로 Mutation Query를 이용하여 isLike 변수을 수정하는 logic을 구현한다.

3-3-1. logic 구성하기

전체적인 logic은 화면 Component 아래 LIKE 버튼을 클릭하면
위에서 구현한 isLiked 변수값이 바뀌면서 이를 버튼에 나타나도록 구성한다.

3-3-2. button 구현하기

  • 버튼을 구현하고, 버튼을 클릭하면 isLiked 변수를 바꾸면서 그대로 화면에 나타내주도록 onClick logic을 구성해준다.

3-3-3. Mutation logic을 통한 cache data Write(cache.method)

Mutation Query를 통해 isLiked 변수를 바꾸는 logic을 구현한다.

  • isLiked를 local state화 하여 cache 메모리에 추가해주었다.
  • 이 cache 메모리에 있는 isLiked 변수에 Mutation 함수가 접근하고, 현재의 boolean 값을 반대 값으로 바꾸는 logic을 구현한다.

cache.modify method를 활용한다.

  • cache.modify method를 이용하여 cache 내 isLiked 변수에 접근하여 그 값을 바꾼다.
  • id 값은 key값 할당하는 것과 같은 원리로, field 식별을 위해 반드시 필요한 과정이다.
    ※ fields 값을 바꿀 때 id에 정의된 객체형태를 그대로 참조해서 탐색한다.
  • fields 값에서 정의한 값은, id값에 정의한 객체 내부의 값이다.
  • ※ modify logic : id 비교 → 해당 객체 내 isLiked 변수 → logic을 통해 변화

3-3-4. 화면 구현 및 Apollo log 확인

  • 최초 LIKE 버튼을 누르면 UNLIKE로 바뀌는 것을 확인한다.
  • Apollo log에 isLiked 변수가 true로 바뀌었음을 확인한다.

3-3-5. (참조) cache data의 활용

  • cache에 있는 데이터를 바꾸면 즉시적인 상태반영과 화면전환 등이 가능해진다.
  • cache에 데이터가 없다면 기본적으로 update 하는 시간이 매우 길어진다.

4. 참조링크

cache.modify 관련 apollo 공식문서
https://www.apollographql.com/docs/react/caching/cache-interaction/#using-cachemodify

0개의 댓글