[GraphQL/Apollo] Apollo/GraphQL 관련 백엔드 실무 개념 및 유의사항들

Hyo Kyun Lee·2021년 8월 27일
0

GraphQL/Apollo

목록 보기
1/7

1. local state - 프론트엔드에서 Query 변수 추가

GraphQL에서 정의한 query에 프론트엔드에서 추가변수를 구성할 수 있다.

  • apollo에서 추가
  • GraphQL에서 응답객체(전달해주는 변수들 집합)와 동일한 경로로 변수 추가

※ 최초 Home 화면의 Home.js

2. 동일한 객체를 받는 Query들은 프론트엔드에서 추가한 변수를 그대로 사용할 수 있다.

다른 Query지만

  • 동일한 객체를 전달(resolve)하고
  • 그 객체안에 새롭게 추가해준 변수가 존재한다면

그대로 그 변수를 사용할 수 있다.

※ 프론트엔드에서 정의한 resolver임을 반드시 명시(@client)
※ detail 화면으로 넘어간 후의 detail.js

3. 인자를 넘길때는 유일(unique)인자를 반드시 함께 넘긴다.

다양한 객체, 그 객체안에서도 여러 인자가 존재한다.

이러한 data흐름의 nomalization과 논리적 흐름 등을 맞추기 위해
반드시 유일인자를 같이 넘겨주도록 한다.

4. 기본적인 log 확인 습관

  • 구성한 Query나 명령을 통해 data가 잘 전달되는지 확인한다.
  • console.log / Apollo log 등 확인하는 습관

5. 데이터 전달이 안된다면

  • 비동기처리 (asyn)나 조건처리(if/&&) 등을 통해 data 전달을 기다리는 logic을 구성한다.
  • 문법이 맞는지, 해당 문법이 동작하는 문법인지(버전호환성) 등을 확인한다.
  • 대부분은 복잡한 문법이 아닌 간결한 문법, 사소한 부분이 틀려 프로그래밍이 잘 안된 경우가 더 많으므로 이 부분을 유의하면서 코딩한다.

0개의 댓글