# apolloClient
GraphQL & Apollo-Client
GraphQL > GraphQL : 페이스북에서 만든 API 를 위한 쿼리 언어이며, 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임이다. REST API 는 보통 여러 엔드포인트 를 가지며 각각의 엔드포인트가 동일한 응답을 반환 하는 반면, GraphQL 은 보통 하나의 엔드포인트 를 가지며 요청할 때 사용하는 쿼리에 따라 다른 응답 즉, 원하는 데이터(response)만 받을 수 있다. REST API test.com/music test.com/music/rock test.com/music/rock/{id} GraphQL test.com/graphql GraphQL 은 아래의 구조를 가진다. (해당 id를 가진 todo의 id, text, completed 를 조회하겠다는 쿼리) Apollo-Client > Apollo-Client : `Graph
useMutation in apollo Client
useMutation apollo Client의 useMutation 훅은 DB의 Data를 mutate하기 위하여 사용하는 Hook이다. 이런저런 방황끝에 알아낸 사용방법을 정리해본다. 반박시 당신말이 맞다. 사용순서는 크게 3단계로 구분된다. mutate하기 위한 쿼리 작성 가장 바깥의 mutation CreateSomething($input: CreateSomethingInput!) {} 은 mutation type의 쿼리를 발송한다는 의미이며 useMutation을 사용할 때 variables로 $input을 넣어준다는 의미이다. 유의할점은 $input: CreateSomethingInput! 이부분의 CreateSomethingInput 또한 graphQL내부에서 검증을 하기 때문에 schema에 명시되어있는 올바른 이름으로 입력해야한다. CreateSomethingInput 내가 요청할 때 보내는 정보!(
[2023-01-11] What I Learned
그라파나(Grafana) urql과 apollo client의 Memory Leak Issue로 인해 최근 많이 사용하면서 유용함을 느꼈다. 그라파나는 메트릭 데이터 시각화 도구인데, 현재는 간단한 사용법 정도만 알고있다. 그리고 정상적으로 가비지 컬렉터가 돌아갈 때의 그래프는 어떤 형상을 띄는지와 Memory Leak이 생기는 경우의 그래프 차이점을 알 수 있었다. 키바나(Kibana) 마찬가지로 데이터 시각화 도구인데 검색을 통해 에러를 추적할 수 있고, 좋긴 했지만 사실 기본적인 에러는 슬랙에 날라오는 로그를 통해 분석이 되는 편이다. 그리고 사용하기 위해 생각보다 알아야 할 것들이 있었다. 유용한 점은 에러를 검색해서 추적 할 수 있는데, 이게 URL로 검색어나 조건을 가져갈 수 있어서 자주 쓰이는 검색어나 조건은 슬랙 Pin을 활용해 간편히 사용할 수 있었다. 그런데 사용법이 개인적으로 좀 직관적이진 않다.. :( Apollo Client 오늘 드디
[code.camp_4일차]동기/비동기,ApolloClient
동기와 비동기방식 등록된 글을 불러올 때 컴퓨터가 불러오는 시간이 아무리 빨라도(1ms라도) 조금은 걸리는데 이때 오류가 생길 수 있다. 그래서 데이터가 백앤드 컴퓨터에 갔다올때까지 기다려주는 명령어가 필요하다. 
useMutation in native(createAccount)
**들어가기 native에서 useMutaion을 사용하는 방법임 web과 다른점이 없다. 별표 부분만 확인해면서 check해 볼것** screens/CreateAccount.js ~
Apollo Client in native
**들어가기 phone에서 서버와 통신을 하게 하는 방법. apollo client, graphql, web과 비슷함. ** npm install @apollo/client graphql 1. ngrok ngrok은 내부 port를 바깥으로 쏴주는 기능임. 한마디로 localhost:3000번에 돌고 있는 application을 외부에서도 접속이 가능하게 쏴주는것. ngrok 싸이트로 가서 ngrok 파일을 다운받고 압출해제 토큰 입력 ngrok http 3000(예를 들어서 외부로 오픈해줄 port를 말함) 구글에서 ngrok 검색하면 page나옴. https://dashboard.ngrok.com/get-started/your-authtoken https://ngrok.com/download ./ngrok http 4000 2. localtunnel 기능은 ngrok과 같음. npx localtunnel --port 400
React에서 Apollo Client 구축 - useQuery
React ApolloClient apollo-client를 우선 설치해줘야 한다. setting React에서 graphQL server와 연결 할 때 우선 apollo client 생성이 필요하다. 따로 apolloClient.js 파일을 만들어 준다. uri: GraphQL server의 url을 지정한다. cache: cache는 InMemoryCache의 인스턴스이며, 이 인스턴스는 쿼리 결과를 가져온 후 이를 캐시하는 데 사용한다. 코드에서는 httpLink와 wsLink를 각각 만들어줬다. split Apollo Client는 WebSocketLink를 사용하여 모든 작업 유형을 실행할 수 있지만 대부분의 경우 query 및 mutation에 HTTP를 계속 사용해야 한다. 그 이유는 query 및 mutation는 상태 저장 또는 장기간 연결이 필요하지 않으므로 WebSocket 연결이 아직 존재하지 않는 경우 HTTP의 효
2022-04-21_TIL
updating ApolloClient Cache and lead to re-rendering issue end user가 원하는 시기(event)에 data를 update 했을 때 cache의 데이터가 업데이트(삭제-> fetch)되는 작업에서 re-rendering이 안되는 문제. useQuery에서 제공하는 refetch() 함수를 통해 query를 재요청할 수 있지만, loading state를 변경하지는 않는다. => 사용자가 button을 통해 refetch()를 호출했지만 결과를 가져오기까지 로딩 화면이 없다면, 결과가 동일했을 시 refetch되었음을 알 수 없는 이슈 ex) const {loading, error, data} = useQuery('someQuery'); s
React-ApolloClient 연습
🗂 Entire diretory structure > 📁 common 📃 apollo-client.ts 📁 interfaces 📃 post.interface.ts 📁 styles 📃 index.ts 📃 layout.css 📃 typography.css > 📁 components 📁 app 📃 app.component.css 📃 app.component.tsx 📁 header 📃 header.component.css 📃 header.component.tsx 📁 posts 📁 posts-form 📃 posts-form.component.css 📃 posts-form.component.tsx 📁 posts-g