1. 학습 방향
Apollo를 통해 백엔드 개념이 무엇인지, 어떤 방식으로 실무에 활용할 수 있는지 학습해본다.
- GrapQL server에 직접 접속하지 않고도 Data를 IDE환경에서 불러올 수 있다.
- 실무에서 log를 통해 data를 확인하는 작업이 많을텐데, 이러한 상황을 시뮬레이션 할 수 있으므로 참고하면서 진행해본다.
- 자신이 작성한 Query가 하나의 API가 될 수 있다는 점을 기억하고, 이를 활용하는 방안을 학습한다.
1-1. Apollo를 통해 data 직접 확보하는 과정
핵심은 Apollo 모듈을 이용해서 GraphQL server에 접속하지 않고도,
GraphQL server 내부의 data를 확보할 수 있다는 점이다.
- 사용자가 작성한 Query를 활용하기위해 GraphQL server에 직접 접속하고, 이를 server 내부에서 사용해서 data를 얻었다.
- @apollo/client로 부터 gql을 import하고, gql에 사용자가 직접 정의한 query를 그대로 기입한다.
- 이를 변수형태로 호출할 수 있고,
GraphQL server에 직접 접속하지 않고도 log를 통해 data를 출력하여 확보할 수 있다.
1-2. Apollo를 통한 확보한 data 살펴보기
기본적으로 useQuery를 통해 두번 데이터를 얻는다.
- rendering 이전 useQuery 최초 호출
- rendering 이후 useQuery 호출
- 일단 기본적인 데이터 구조는 위와 같고, 객체 형태를 통해 전달된다.
- 위에서 작성한 Query를 통해 얻는 data(id, medium_cover_image)와 더불어,
Apollo 측에서 제공하는 다른 데이터들도 함께 전달된다.
- 우리가 얻고자 하는 query data는 {data} 객체 내부에 들어있다.
- data는 최초 호출 시 undefined, 이후 rendering 시 정상적으로 확보된다.
- 이외 loading 객체(true -> false)도 함께 전달된다.
※ useQuery는 내부에 hooks(useEffect) logic이 있기 때문에, 위와 같이 데이터가 2번 전달되는 것처럼 보인다.
1-3. 백엔드 관점에서 알 수 있는 점
- 우리는 fetch, get, post와 같은 별도의 요청없이 단순히 GraphQL query를 통해 data를 얻어올 수 있었다.
- 직접 GraphQL server에 접근하지 않고도, IDE환경 및 log출력을 통해 원하는 data를 확보할 수 있었다.
- 프로그래밍하는 환경에서 data를 확보할 수 있으므로, Apollo를 활용하면 손쉽게 data를 얻고 더 나아가 이를 이용하고 가공할 수 있게 될 것이다.
- 여러 url, endpoint 필요없이 단 하나의 endpoint(=GraphQL server)만으로도 충분하다.
2-1. 화면에 data 나타내기
최초 rendering이 실행된 후 data를 받아오는 곳은 Home component이다.
- Query를 통해 data를 받아오고 이에 대한 logic을 정리한다.
- loading 이후, data를 받아올 때의 화면은 별도로 구성하여 관리한다.
- ※ && 연산자는 이전의 조건을 만족했을 때 이후의 logic을 실행해주는 구조이다.
Component를 별도로 생성하고 관리하며, 많은 코딩을 통해 그 시점을 파악하는 것이 필요하다.
- 화면이 전환되거나
- data를 받아올 화면이 필요한데 재활용성이 큰 화면을 구성할 경우
- data자체를 받아오는 기능, 그 data를 받아 화면으로 구현하는 기능을 나눌 경우
- 코드가 길어지는 시점 등
2-2. 화면 확인
- 화면이 구현되었는지, id를 클릭하였을때 정상적으로 url Link가 작동하는지 확인한다.
2-3. 백엔드 관점에서 알 수 있는 점
- Apollo를 활용하여 IDE환경에서 data를 손쉽게 받아올 수 있다.
- fetch, url request, DOM update, JSON.stringify(JSON data 가공) 등의 복잡한 기능 필요없이 곧바로 data를 받아와서 화면에 구현할 수 있다.
2-4. (참조) directory 관리
본 project에서는 directroy 관리를 특성(속성)에 따라 분류하였다.
- 화면, 뼈대, 기초적인 data 전달 등은 routes 폴더에서 구성하여 관리한다.
- 기본적으로 화면 사용에서의 재활용이 일어나므로 별도의 화면 폴더를 구성하였다.
→Home.js / Detail.js
- data를 받아오고 url 관리, 화면에 나타낼 data 보여주는 등의 기능은 components 폴더에서 구성하여 관리한다.
- data를 화면에 나타내주는 것, 그 화면을 꾸미고 구성하는 것은 별도로 관리해준다.
→ App.js / Movie.js
3-1. 화면이 넘어간 후 id인자(url option) 넘겨받기
Link를 통해 넘어간 화면에서 id값을 전달받고, getmovie(id) query를 통해
전체 data를 넘겨받아 Detail 화면을 구성하는 logic을 구현한다.
3-1-1. useParams()
url에서 넘겨받은 option인자(=params)를 인자로 받기위해 useParams 함수를 사용한다.
- Detail 화면으로 넘어왔을 때 useParams로 부터 id인자를 넘겨받을 수 있다.
- 이 id인자를 그대로 넘겨받고, 향후 Query를 사용하여 movie data를 넘겨받도록 한다.
- ※ 화면이 Detail로 넘어왔을 때의 logic이므로 Detail.js에서 구조를 구성한다.
- 반드시 useParams 함수를 통해 어떤 인자가 전달받았는지 직접 확인한 후, 이후 인자를 활용하여 data를 얻도록 한다.
- 전달받은 인자를 확인하고, 이에 알맞게 비구조화하여 인자를 확보한다.
3-1-2. 이용할 Query 확인
id값을 넘겨받아 해당 data들을 전달해주는 Query를 이용한다.
- 자신이 만든 Query가 Apollo에서는 하나의 API로 사용될 수 있다는 점을 꼭 기억하면서 프로그래밍을 진행한다.
3-2. Query를 이용하여 넘겨받은 id를 통해 전체 data까지 넘겨받기
위에서 전달받은 id값을 이용하여 최종적으로 전체 data를 넘겨받고, 이 중 선별하여 화면에 나타나도록 한다.
3-2-1. 데이터를 전달받은 query 구성(변수인자가 존재할 경우)
- GraphQL의 Query의 변수인자가 따로 존재할 경우, Apollo Query - GraphQL Query 구성을 만들어 변수인자를 전달하는 방식으로 생성해야 한다.
- Apollo에서 생성한 임의의 query는 변수를 전달하고, GraphQL query는 그 변수를 전달받아 server에 전달하여 해당 데이터를 전달받게 된다.
3-2-2. useQuery를 통한 query 전달 및 data 받기
- 위 query를 바탕으로 useQuery를 통해 GraphQl server에 전달하여 data를 확보하는 logic을 구성한다.
- 이때 변수인자는 variables를 통해 전달하며, useParams로 받은 id값은 문자열 형식으로 정수형태로 변환하여 전달하도록 한다.
3-2-3. 전달받은 data 확인
기본적으로 전달받은 data를 log로 먼저 확인하고, 이후에 활용하도록 한다.
- data가 정상적으로 전달되었고, logic이 잘 작동하는지 확인한다.
- 최종적으로 전달받은 data가 어떤 구성으로 되어있는지 확인한다.
- data는 객체형식임을 확인하였고, 내부 구성을 추가 확인하였다.
4. (참조) Query 오류 확인
여러 Query 오류가 있지만, 그 중에서도 예상하지 못할 수도 있는 오류
- type Query에서 전달받는 데이터가 객체인지, 배열인지 확인해본다.
5. 참조링크
axios / params
https://masteringjs.io/tutorials/axios/get-query-params
