반응형 Apollo4 apollo에서 Error: Unexpected token < in JSON at position 0 보통 Error: Unexpected token < in JSON at position 0 에러는 header에 application/json을 명시하지 않아서 나는 에러라고 한다. 하지만 나는 graphql을 사용하기에 해당되지 않는다. 그럼 뭘까. https://stackoverflow.com/questions/53209623/network-error-unexpected-token-in-json-at-position-0-at-new-apolloerror 위 문서에서 말하기를 httpLink를 확인해보란다. 확인해보니 path에 graphql을 안써주었다. graphql을 붙혀주니 해결되었다 ㅎㅎ 2022. 2. 28. Apollo 를 이용한 상태관리 props 전달로도 충분히 가능하지만, graphQL(Apollo)를 이용하여 상태관리 할 수 있다는 사실을 알고 있었고, 회사에서도 graphQL을 주력으로 사용하기 때문에(난 랜딩페이지 담당이라 아직 사용할일은 없지만) 어떻게든 graphQL을 이용하여 상태관리를 하고 싶었다. 며칠간 유튜브, 블로그, 공식문서를 전전하다 apollo를 이용한 상태관리로 TodoList를 만드는 과정을 설명한 블로그를 찾게 되었다. 그동안 삽질한 것들의 농축 + 기가막힌 컨텐츠 덕분에 곧바로 이해가 되었고 내 사이드 프로젝트에서도 응용하였다. 리덕스, 리코일과 비슷했다.(원리는 다르겠지만 일단 보기에는 비슷) 그냥 파일하나에 전역상태 다 몰아넣고 필요할때마다 꺼내 쓰는 것. 전역상태는 하이라이트 되어 있는 stores.. 2022. 2. 12. Apollo 공식문서 첫부분 https://www.apollographql.com/docs/react/get-started/ 공식문서를 그대로 따라하였다. npm install, npx-create-react-app 같은 부분은 설명하지 않는다. 튜토리얼은 공식문서에 잘 설명되어 있기 때문에, 튜토리얼보다는 튜토리얼을 나름대로 정리했다. 공식문서를 따라한 CodeSandBox InMemoryCache : 아폴로가 캐시를 이용할 수 있게 해주는 라이브러리 ApolloProvider : 모든 컴포넌트에서 아폴로에 접근하도록 해준다. useQuery : GraphQL 데이터를 UI와 공유하도록 도와주는 리액트 훅 useQuery를 통해 응답의 상태를 추적 컴포넌트가 렌더될 때 useQuery는 Apollo Client에서 object를 .. 2022. 1. 22. Apollo Client Apollo Client Apollo Client는 GraphQL을 편하게 사용하도록 도와주는 클라이언트 라이브러리이다. 또한 전역 상태 관리 라이브러리의 역할도 한다. GraphQl 쿼리를 작성하기만 하면 Apollo Client가 데이터를 요청하고 캐싱하고 UI까지 업데이트해준다. 응답의 상태를 추적(load, error, value) Apollo Client는 로딩, 오류 상태를 추적하여 처음부터 끝까지 요청주기를 포함한다. 이는 내가 프로젝트때 사용했던 리코일의 selector함수를 이용한 비동기처리와 닮아있다. useQuery 훅을 통해 Apollo 앱에서 쿼리를 실행, useQuery에 GraphQL 쿼리 문자열을 전달하여 호출한다. 캐시를 이용한 네트워크 요청 생략 Apollo Client는.. 2022. 1. 21. 이전 1 다음 반응형
