Apollo Client 2.5의 Local state management를 소스 코드를 빌려 체감해 보았다 in Vue

아래의 두 Qiita 기사에 자극을 받고 Apollo Client Cache를 만나려고하면 2019 년 2 월 27 일 Apollo Client v2.5가 출시되었으며 apollo-link-state가 본체에 흡수됩니다. 어쨌든.

세상의 프런트 엔드 엔지니어에게 Apollo Client를 포교하고 싶다 - Qiita

vuex 없음 묶어. vue와 apollo-link-state로 카운터 만들기 - Qiita

잠깐 빠져 나가면서 움직이는 곳까지 갔기 때문에 메모.

1. 처음부터 쓸 수 없는 쓰지 않는 나는 소스코드를 입수

Apollo Client 2.5 이전 앱을 찾고 좋아하는 Todo 앱의 아래 소스 코드를 다운로드했습니다.

Local State with Apollo in Vue - CodeSandbox

이 소스 코드는, apollo-boost 를 이용하고 있으므로, 다음과 같은 상태인 것 같다.

그래서, 원래, Apollo Client 2.5 대응이라든가 말해 재기록할 필요가 없다! 의지도 모른다.

Apollo Boost를 사용한다면 아무 것도 변경할 필요가 없습니다. Apollo Boost는 Apollo Client의 통합 로컬 상태 처리를 사용하도록 업데이트되었습니다. 즉, apollo-link-state는 더 이상 사용되지 않습니다. 뒷면에서 Apollo Boost의 clientState 생성자 매개 변수는 필요한 로컬 상태 초기화를 Apollo Client에 직접 보냅니다.
인용문: Migrating from apollo-link-state by Google 번역

2. ESLint가 시끄 럽기 때문에 무자비하게 삭제

이런 느낌?

3. Apollo Boost 삭제

Apollo Boost가 좋은 느낌으로 해주고있는 것 같기 때문에 삭제한다.

각 파일에서 import { gql } from "apollo-boost"를 import gql from "graphql-tag"로 바꿉니다.

다음을 실행. (확실히.)

npm uninstall --save apollo-boost

여기 Apollo Boost migration 를 참고로 했다.

4. 필요한 라이브러리 설치

확실히 이런 느낌.

npm install --save apollo-cache-inmemory apollo-client graphql-tag

5. 수정

크게 다시 쓰는 것은 src/main.js . 자세한 내용은 코코을 참조하십시오.

여기 Migrating from apollo-link-state를 참고로 했다.

6. 엔피 엠 랑데부 (실행)

npm run dev

7. 정리

자신의 메모이므로, 끝이 접혀 있는 곳도 있다.

이 녀석에서 Cache를 살펴보십시오.

그냥 실행

git clone https://github.com/high-u/local-state-with-apollo-in-vue.git
cd local-state-with-apollo-in-vue
npm install
npm run dev

이상