React-query 로 해보는 axios

지난번에는 Jikan API 로 Fetch API 와 함께 react 에서 개략적인 구성을 해 봤으니, 이번에는 GraphQL 을 이용해서 Jikan API 를 다시 한번 건드려 보고자 합니다.

 

Jikan API 대신, 다른 API 를 사용해서 간단한 테스트 구동을 진행해보고자 합니다.

 

개요.

react-query 를 주요하게 사용해서 REST API 데이터를 불러오기.

 

왜 이 실험을 하나요?

1. useEffect 보다도 보다 안정적이다 하기에.

2. 지난 인턴 때 겪었던 고충을 계기로 개선점을 알아가던 중, 추천받은 react-query.

3. axios 로 fetch 를 대체할 수 있다는 사실을 알게됨.

4. 아무튼 코드 길이가 줄어 듬.

5. hook 로 코드 개선하는게 꼭 나쁜건 아님 (적어도 지금 이해하기로는 오히려 코드 가독성의 개선이 월등).

 

예상되는 장점.

유연하게, 간편하게, 직관적이게 대응 가능할 것으로 기대.

 

1. 사용 스택:

React.js - 전체적인 베이스 기반

GraphQL - REST API 에 대응 

 

2. 추가 메모:

NextJS - 아무리 예상 범위인데다 전혀 다른 부위라 해도 작업 도중 어찌될지 모르니 일단 보류.

핵심은 how to use fetch API to query the data in GQL? And how to deal with the schema if using rest api?

 

GraphQL(gql) 을 꽤 적극적으로 고려했으나, 최종적으로 REST API 에 한해서는 react-query 쪽이 더 대세인 것으로 판명

(할거면 따로 쓰는 경우도 있는 점을 고려).

 

3. 전작과의 차별점:

계획대로 끝낼 수 있도록 '완전히 계획 범위 이외의 기술은 배제' 하고 진행.

 

4. 목표:

React.js 와 GraphQL react-query 의 조합으로 REST API 를 다루는 사이드 프로젝트 구현.

이 후, 모바일 페이지를 기준으로 CSS 부문은 작업해보기.

만약 메뉴 필요시, Media query 사이즈 대응은 오직 1개만. (1000px)

오직 검색창만 존재 할 예정. (Sidebar 걱정 X)

이번에는 여러개의 page 가 고려되지 않음 (react-router-dom 는 고려됨).

 

핵심 파일.

index.js, App.js, Home.js

 

5. MVP:

적어도 REST API 와의 통신 기능 작동 만큼은 구현. ✅

 

목표 기한:

11월 30일✅

 

1차 결론.

react-query 및 axios 와의 조합으로 rest api 쪽에서 get method 로 구성 완료.

이제 이것으로 state, useEffect 의 마굴에서 당분간은 좀 편해질 수 있겠습니다.

GitHub - mireu-san/jikan-react-query: From scratch to build up Anime Search page with Jikan API and react-query.

---

28일.

GraphQL 에다가 REST 를 이용하기 위해 고려해야 할 점 

How to Fetch Data in React from a GraphQL API 

그리고 최종적으로 React Query (useQuery) + Fetch API 의 조합이 다시 등장.

How to fetch data from APIs using React Query? 

How to fetch data from APIs using React Query?

 

그럼 예시는?

useQuery()

 

그런데 이해가 어렵다. 그래서 나온 것. 이 링크!

이 링크는 graphql 에서 react-query 와 axios 를 같이 쓰는 것을 권하고 있다.

 

잠정 결론.

일단 graphql 과 rest api 와 혼용해서 사용하는 건 잠정 보류.

대신, react-query 와 axios 를 접목해서 사용 하는 걸로 대체.