Apollo-link: [아폴로-링크-오프라인] 당신의 생각은 무엇입니까?

일반적인 사용 사례로 무엇을 고려하시겠습니까?

오프라인 앱으로:

• 모든 graphql 요청이 대기열에 추가됩니다. (캐시에 저장 가능).
• 애플리케이션이 온라인 신호를 수신하면 링크에 이전 요청을 다시 제출하도록 알립니다.

나는 그것이 다음과 같이 사용된다고 상상한다.

import { NetInfo } from 'react-native';
import OfflineLink from 'apollo-link-offline';

const offlineLink = new OfflineLink({
  isOnlineAsync: () => NetInfo.isConnected.fetch(),
});

NetInfo.isConnected.addEventListener('change', (isConnected) => {
  if (isConnected) {
    offlineLink.resubmit();
  }
});

놀라운 기능이 될 것이라고 생각합니다. 내가 볼 수 있는 잠재적인 방법은 Apollo-link-offline이 오프라인에서 사용해야 하는 쿼리 및 돌연변이 세트를 정의하도록 하는 것입니다.

일단 그것들이 정의되면 애플리케이션의 백그라운드에서 쿼리에서 모든 데이터를 가져와 로컬 저장소에 저장할 수 있습니다. Mutations의 경우 오프라인에서 생성된 모든 데이터를 저장할 수 있도록 로컬 저장소에 생성된 모든 필드가 필요합니다.

이렇게 하면 로컬 캐시에 데이터를 저장하는 동안 오프라인에서도 기능을 계속 수행할 수 있습니다.
서비스 워커에 연결할 수 있다면 Google PWA 테스트도 통과할 것입니다.
그런 다음 앱이 다시 온라인 상태가 되면 로컬 캐시에서 발생한 모든 변형을 API로 다시 전달할 수 있습니다.

분명히 어떤 형태의 동시성 보호가 필요합니다.

내 걱정은 사용자 A(오프라인)가 테이블 X를 업데이트하는 반면 사용자 B(온라인)는 사용자 A가 오프라인인 동안 테이블 X를 업데이트한다는 것입니다. 여기에 어떤 형태의 동시성 규칙이 필요합니다. 날짜 기반일 수 있지만 사용자 A가 사용자 B가 인식하지 못하는 상태에서 사용자 B의 데이터를 무시하면 문제가 해결되지 않습니다.

또는 돌연변이에 실패하고 사용자가 다시 온라인 상태일 때 수동으로 업데이트하도록 할 수 있습니다.

Apollo Client 2는 훌륭하지만 이 기능은 절대적인 개 덩어리가 될 것입니다.

나는 이것의 열렬한 팬이기도 하다. 1.0의 Redux 스토어로 이 문제를 해결하려는 다양한 시도가 있다는 것을 알고 있지만 일관된 접근 방식으로 Apollo 2.0 생태계의 완전한 시민으로 만드는 것은 매우 놀라운 일입니다.

여기에서 다룬 대부분의 내용은 이미 나에게 많은 의미가 있습니다. 기본적으로 내 데이터를 로컬 스토리지에 유지한 다음 나중에 그곳에서 Apollo로 가져오기를 원합니다. 두 번째로, 돌연변이를 대기열에 넣습니다.

일종의 3차 목표로 백그라운드에서 더 많은 데이터를 빨아들일 수 있다는 것 또한 훌륭할 것이고, 나는 상관없이 할 일을 찾고 있을 것입니다. 나는 실제로 거의 모든 사용자 데이터를 로컬에 저장하고 싶습니다. 일반적인 쿼리 작업을 훨씬 더 빠르게 만들고 네트워크가 허용하는 완전한 정확성을 위해 재수화하기 위해서입니다. 따라서 서비스 워커가 Safari가 마침내 기술 프리뷰로 제공되면서 실행 가능하게 되기 시작함에 따라 나중에 열렬히 로드되는 각도에 대한 일종의 솔루션이 될 것입니다.

나도 이것에 대해 흥분한다. @danieljvdm apollo-client repo 의 문제에 대한 지속성에 대해 약간의 우위를 점했습니다 .

나는 RetryLink 가 네트워크 오류 및 재시도를 관리하는 데 유용할 것이라고 생각하지만 redux-offline과 같은 일종의

이것은 꽤 멋지다. @2WheelCoder가 언급한 문제는 완전한 오프라인 지원(쿼리 대기/변이 등)보다 캐시를 ​​유지하는 데 더 중점을

그것은 여전히 ​​시작하고 그 위에 구축하기에 적절한 장소가 될 수 있습니다. 그 문제에서 내가 지적한 것은 현재 캐시 변경 사항을 모니터링하는 좋은 방법이 없다는 것입니다. 실제로 오늘 일찍 @2WheelCoder 의 초기 제안을 구현하려고 시도했지만 비슷한 문제가 발생했습니다. "저장소 변경 모니터링"을 위한 ApolloLink 생성의 문제는 클라이언트 작업과 후속 캐시 쓰기 사이의 컨텍스트에만 존재한다는 것입니다. 그래서 요청이 나가기 전에 가로채고(미들웨어) 캐시에 기록되기 전에 가로챌 수 있습니다(애프터웨어). 하지만 언제 작성되었는지 알 수 없습니다. ).

오프라인 지속성을 위해 링크를 사용할 때의 또 다른 치명적인 결함은 구독을 고려하지 않는다는 것입니다. 구독 링크는 후속 이벤트가 아닌 구독이 열릴 때만 실행됩니다(내가 놓친 이 작업을 수행하는 방법이 있을까요?).

이것은 기본적으로 내가 지금 있는 곳이고 꽤 막혔습니다. 더 나아가려면 apollo-cache-inmemory에 대한 PR을 열어야 할 수도 있습니다.

@danieljvdm 저는 같은 위치에 있으며 동일한 문제가 발생한 후 캐시에서 직접 지속성을 처리하는 것이 합리적이라고 생각합니다. HttpLink는 관찰 가능 항목이 요청 후에 완료되지만 (일반적으로) 캐시 업데이트 전에 완료되기 때문에 적합하지 않습니다.

apollo-cache-inmemory에 대한 PR을 여는 것이 가치가 있을 수 있지만 새 프로젝트에 이를 포크하는 것이 더 나은지 궁금합니다. 캐시와 링크에 대한 Apollo 2의 모듈성은 다른 종류의 캐시가 필요한 경우 구축할 수 있음을 시사하는 것 같습니다. 아마도 apollo-client의 문제가 다음 단계일 것입니다(apollo-cache-inmemory에는 자체 저장소가 없다고 생각합니다)?

여기 링크에서 주제를 조금 벗어나서 죄송합니다.

@holman 사파리 테크 프리뷰에서 서비스 워커에 대한 참조가 있습니까?

@sedubois 그것은 한 두 달 전에 (갑자기) 떨어졌습니다. 기술 프리뷰 에 있지만 아직 갈 길이 많이 남아 있습니다.

@2WheelCoder 새 캐시에 대한 아폴로 클라이언트의 PR 아이디어가 마음에 apollo-offline-cache 를 확장할 수 있는 apollo-cache-inmemory ? 기꺼이 도와드리겠습니다. 거기에서 문제를 열고 싶습니까?

@2WheelCoder @danieljvdm 지속성을 위해 LocalForage를 사용하는 것은 어떻 습니까 https://github.com/localForage/localForage 여러분이 PR을 열면 기꺼이 손을 빌려줄 것입니다

@danieljvdm 예, PR을 진행하고 싶다면 이슈를 열겠습니다. 나는 다음 주 반 동안 시간이 많지 않지만 그 이후에 뛰어들게 되어 기쁩니다.

@Eishpirate 확실히 LocalForage가 훌륭 apollo-offline-cache 에서 따라야 할 적절한 패턴으로 작용할 수 있을 것 같습니다.

여러분, 저는 redux 지속 패키지를 사용하여 기본 AsyncStorage에 저장소 데이터를 저장하고 있습니다. 지금 어떻게 합니까? 어떤 아이디어라도?

@Eishpirate : localforage가 네이티브 반응에 작동합니까? 라이브러리의 호환성 차트를 보면 반응 네이티브에 대해 아무것도 찾을 수 없습니다. https://github.com/localForage/localForage/wiki/Supported-Browsers-Platforms

폴로의 오프라인 기능이 앱에서 작동하지 않는다면 매우 슬플 것입니다..

@timLoewel 아주 좋은 지적입니다. React Native만큼 앞서 생각하지 않았습니다. 명시적으로 그렇게 하는 것을 믿지 마십시오.

이로 인해 예기치 않은 문제가 발생할 수 있습니다. 바퀴를 재발명하지 않고도 실행 가능한 대안이 있는지 확실하지 않습니다.

이 토론과 관련될 수 있는 흥미로운 기사 https://blog.logrocket.com/building-an-offline-first-app-with-react-and-rxdb-e97a1fa64356?t=now

rxdb를 오프라인 데이터베이스로 사용하는 것은 정말 유망해 보입니다. 이것은 React, React-Native, Vue, Angular, 거의 가장 인기 있는 옵션과 호환됩니다.

내가 찾은 문제는 PouchDB(CouchDB에서 파생됨)와 같은 noSQL 데이터베이스와 동기화해야 한다는 것입니다. 제 사용 사례에서는 관계형 SQL 데이터베이스(Postgres)를 사용하고 있으며 모든 데이터 유효성 검사는 데이터베이스 수준에서 발생합니다. 이 시스템을 사용해야 한다면 jsonschema를 통해 유효성 검사를 유지해야 합니다.

DRY 원칙을 따르지 않으며 확실히 문제가 발생합니다.

내가 찾은 또 다른 옵션은 Postgres와 함께 작동하는 Kinto http://docs.kinto-storage.org/en/stable/index.html 이므로 rxdb가 도입할 추가 복잡성 계층을 피해야 합니다. Kinto는 HTTP를 사용하므로 이론적으로 Apollo-link-http https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-http에 연결할 수

많은 작업이 캐싱과 관련될 것 같습니다.

리덕스는 어떻습니까? (나는 진지하다)

apollo-offline 작업과 apollo-link-offline 패키지...
apollo-cache-redux 패키지. apollo-offline이 지금 하는 것처럼 redux-offline/redux-persist를 사용하십시오.

Apollo는 기본 일반 솔루션으로 inmemory-cache를 만들었습니다. 다른 라이브러리와 그렇게 밀접하게 연결되는 것을 원하지 않는 이유를 이해할 수 있습니다. 그러나 redux/redux-offline/redux-persis 솔루션은 전투 테스트를 거쳤으며... 여전히 훌륭한 선택입니다. 개발은 세 가지 모두에 대해 매우 활발합니다.

편집: @rportugal 덕분에 apollo-cache-redux 가 이제 존재합니다.

@giautm 저는 당신이 얼마 전에 제 작은 프로젝트에 대해 설명한 것을 거의 정확하게 구현했으며 이를 정말 간단한 패키지인 apollo-link-queue 로 게시하기로 결정했습니다. 개선을 위한 아이디어가 있으면 제안이나 기여를 받고 싶습니다.

이 문제의 상태가 어떻습니까? Apollo에서 Redux 오프라인과 관련이 없는 오프라인 항목에 사용할 수 있는 것이 있습니까?

@smithaitufe ,
예, apollo-cache-persist를 사용할 수 있습니다.

@그레고르1971
이 참조를 주셔서 감사합니다. 나는 그것을 시도하고 내 의견을 제출할 것입니다.
표면적으로는 시원하고 구현하기 쉽습니다.

이것이 폴로 링크 큐 와 어떻게 다릅니

안녕하세요 여러분, 저는 apollo-offline 과 유사한 동작을 하는 react-native에 대한 기본 구현을 함께 구성하려고 했습니다.
(핑 https://github.com/Malpaux/apollo-offline/issues/14)

이 요지에서 확인할 수 있습니다. https://gist.github.com/lachenmayer/2e364a5ca9ae0918eb032867d0c6720d

다음의 조합입니다.

• 아폴로 링크 큐 ,
• 아폴로 링크 재시도 ,
• 사용자 정의 optimisticFetchLink 기능.

장치가 오프라인 상태가 되면 요청이 대기열에 추가되고 다시 온라인 상태가 되면 대기열이 해제됩니다. ( apollo-link-queue )

네트워크 오류로 실패한 모든 요청은 재시도됩니다(현재 무한). ( apollo-link-retry )
이것은 장치가 오프라인이거나 백엔드에 연결할 수 없기 때문일 수 있습니다(예: 다운된 경우).

그러나 캐시에서 쿼리를 해결할 수 있는 경우 다시 시도하지 않고 대신 캐시의 데이터가 응답으로 사용됩니다. 이것은 optimisticFetchLink 함수에서 구현됩니다.

내 생각에 이 "낙관적 가져오기" 동작은 apollo-offline의 가장 중요한 부분 중 하나이며 향후 apollo-link-offline 구현은 이를 지원해야 합니다. 이를 통해 사용자는 데이터를 가져오고 유지하는 한 오프라인 상태에서 평소와 같이 앱을 계속 사용할 수 있습니다. 제 생각에는 이것이 network-and-cache 가져오기 정책의 기본 동작이어야 하지만 불행히도 이것이 곧 변경될 것 같지는 않습니다(https://github.com/apollographql/react-apollo/issues/ 참조). 604#issuecomment-355648596).

요지 를 offlineLink.js 로 저장 하면 다음과 같이 사용할 수 있습니다.

import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'

// get this from https://gist.github.com/lachenmayer/2e364a5ca9ae0918eb032867d0c6720d
import { createOfflineLink } from './offlineLink'

const cache = new InMemoryCache()
const networkLink = createHttpLink()

const offlineLink = createOfflineLink({ cache })

const link = ApolloLink.from([
  // ... + other links ...
  offlineLink,
  networkLink,
])

const client = new ApolloClient({
  cache,
  link,
}

알려진 문제/비트 누락

• 이것은 현재 반응 네이티브에서만 작동합니다. 이 크로스 플랫폼을 만들려면 isOnline 체크를 추상화해야 합니다.
• 캐시에 부분 응답만 있는 경우 응답이 불완전하다는 메시지가 표시되는 어딘가에서 거부된 약속을 받게 됩니다. 나는 그것을 고치는 방법이나 실제로 apollo-offline이 이것을 어떻게 해결하는지 아직 조사하지 않았습니다. 이 문제를 해결하려는 경우 이에 대한 조언을 주시면 감사하겠습니다.
• 현재 재시도 설정을 변경할 수 없습니다. 이는 추가 구성 매개변수로 추가되어야 합니다.
• 낙관적 가져오기를 제어할 수 없습니다. 각 쿼리에 대해 이것을 독립적으로 설정할 수 있어야 합니다. 나는 pollo-offline의 이것에 대한 큰 팬은 아니지만( {__online_: true} 쿼리 변수 설정), 확실히 이것을 할 수 있는 방법이 있어야 합니다.
• 물론 테스트도 없습니다.

이것에 대한 솔루션을 찾고 있는 사람이 이것을 시도해 볼 수 있게 해주시면 감사하겠습니다. 그러면 타이핑, 테스트, 문서 및 전체가 포함된 적절한 npm 모듈로 전환할 수 있습니다. 이 동작은 제 생각에 매우 중요하며, 아직 apollo-client 2에 이에 대한 적절한 솔루션이 없다는 것은 정말 유감입니다.

멋져요✌️

@smithaitufe ,

이것은 apollo-link-queue와 어떻게 다릅니까?

apollo-link-queue가 연결 상태를 기반으로 지능적인 작업을 수행하는 것처럼 보입니다. apollo-cache-persist는 캐시를 저장합니다. 예를 들어 사용자가 연결이 끊긴 상태에서 앱을 시작하고 실행할 수 있습니다. 캐시를 유지하지 않으면 앱을 시작하려면 연결이 필요합니다.

우리는 위의 @lachenmayer 의 솔루션(apollo-link-queue 사용)과 영구적인 캐시 둘 다 또는 더 나은 방법을 원할 것입니다. (우리는 링크 리포지토리에서 채팅 중이므로 여기에서 가장 중점을 둡니다.)

@lachenmayer 첫인상 부터 접근 방식이 매우 매력적으로 보입니다.

apollo-offline 의 낙관적 가져오기 기능과 같은 것이 필요하다는 점에 전적으로 동의합니다. 그것(또는 그것의 부족)은 주로 내가 apollo-offline 을 시작하도록 영감을 준 것입니다.

나 자신은 apollo-offline 에서 낙관적 가져오기 기능을 선택적으로 활성화/비활성화하는 방법을 구현해야 하는 방법에 만족하지 않습니다. 쿼리 변수가 첫 번째 선택은 아니지만 가장 실용적인 것 같았습니다. 무엇을 제안하시겠습니까?

앞으로 몇 주간은 나에게 상당한 스트레스가 될 것이다. 그 후에는 Apollo를 위한 최신 오프라인 첫 번째 솔루션의 구현에 기꺼이 기여하겠습니다. apollo-offline 패키지의 새 버전이거나 apollo-link-offline 와 같은 것일 수 있습니다.

@MLPXBrachmann 감사합니다!
나는 낙관적 페칭이 fetchPolicy 사용하여 제어되어야 한다고 생각합니다. 캐시에서 아무것도 가져오지 않으려면 network-only 를 사용할 수 있어야 합니다.

@lachenmayer @MLPXBrachmann

저는 기꺼이 기여할 준비가 되어 있습니다.

나도 Apollo 앱에서 오프라인 동작을 구현하는 옵션을 찾고 있습니다. @lachenmayer 의 접근 방식은 매우 유망 폴로 링크 재시도에 의존하므로 페이지가 새로 고쳐지면 서버에 커밋되지 않은 데이터는 폐기됨(앱이 일시 중단된 경우 반응 네이티브에서도 동일한 것으로 가정). 그 측면에 대한 작업이나 최소한 논의가 있습니까?

@nicocrm 알겠습니다 ... 현재 오프라인 지원에 대한 논의는 주로 이 문제에 있습니다. 아폴로 자체가 지금 다른 우선 순위를 가지고 있다고 생각하므로 커뮤니티 프로젝트 apollo-link-offline 만들어야 합니다. 이것은 바라건대 지금보다 더 많은 토론과 발전으로 이어질 것입니다 😄

@benseitz 저는 확실히 찬성합니다. 이 기능에 많은 관심이 있으므로 커뮤니티 프로젝트를 위한 여지가 있다고 확신합니다. 기존 노력을 복제하거나 조각화하지 않는 한 새로운 팀과 apollo-link-offline을 위한 저장소를 만들고 관심 있는 모든 사람을 초대할 수 있습니다. . 개인적으로 관심이 있는 부분이 있고 클라이언트가 그 기능에 대해 정말로 추진하고 있기 때문에 몇 시간 동안 설명하겠습니다. 나는 그들이 훨씬 더 많은 경험을 가지고 있기 때문에 그들이 주도권을 잡고 싶어하는지 알아보기 위해 apollo-offline repo에 물어볼 것입니다.

나는 이것에 개인적으로 관심이 있습니다. @nicocrm에서 당신과 더 많은 이야기를 나누게 되어 기쁩니다. 나는 반응 네이티브에서 지금까지 손실된 요청을 발견하지 못했지만 tbh 나는 이 모든 것을 제대로 테스트하지 않았습니다(지금까지는 쿼리로만 & 모든 것을 잘 실행하는 _것 같습니다_).

나는 이것을 위해 repo를 시작하는 것이 합리적이라고 생각합니다. 위에서 언급한 apollo-offline 를 구축한 @MLPXBrachmann 은 앞으로 몇 주 동안 apollo-offline 을 개선하는 데 시간을 할애하지 않을 것이며 apollo-link-offline 라고 부르는 것이 가장 합리적이라고 생각합니다.

apollo-offline 에서 재사용할 수 있는 코드는 없다고 생각합니다. 매우 redux에만 해당되기 때문입니다.

@nicocrm 나는 당신에게 매우 동의합니다. 대기 중인 쿼리/변이를 지속하는 것은 확실히 잠재적인 apollo-link-offline 가 처리해야 합니다.

@benseitz 저도 커뮤니티 활동으로 apollo-link-offline 를 시작하는 것이 좋은 아이디어라고 생각하고 개발에 참여하고 싶습니다.

@lachenmayer 당신이 절대적으로 옳습니다. apollo-offline 와 계획된 apollo-link-offline 패키지가 공유하는 코드의 양은 아마 거의 없을 것입니다. 그러나 나는 Apollo 2.0 세계에서 오프라인 툴킷 세트를 개발할 때 전자의 기본 개념 중 많은 부분이 여전히 적용된다고 생각합니다.

어쨌든 apollo-link-offline 대한 아이디어에 대해 논의하고 구현에 대한 피드백을 제공하고 일정이 조금 여유가 생기면 코드도 제공하겠습니다.

@MLPXBrachmann @lachenmayer @nicocrm 이렇게 하는 것이 올바른 방법인 것 같습니다!
누구나 Apollo Slack 에서 공개 채널을 열 수 있기 때문입니다. apollo-link-offline 라는 것을 여는 것이 좋습니다. 어쩌면 이것은 우리 사이의 의사 소통을 조금 더 쉽게 만듭니다. 모든 중요한 결정은 여전히 ​​GitHub 문제에 문서화되어야 합니다.

repo와 slack 채널을 모두 열어도 괜찮습니까? 아니면 둘 중 하나가 그렇게 하고 싶습니까?

확실히, 감사합니다!

나는 당신을 Repo에 공동 작업자로 추가했습니다. 그리고 Apollo Slack 에서 #apollo-link-offline 채널에 가입할 수 있습니다.

물론 모든 사람들은 GitHub Repo에서 협업하고 Slack에서 토론할 수 있습니다. :)
너무 신났어요 💯

Google 검색을 통해 여기로 오는 분들을 위해 Apollo Client 2.0에서 사용할 수 있는 모든 기존 오프라인 기술에 대한 요약을 작성했습니다.

https://github.com/benseitz/apollo-link-offline/issues/1#issuecomment -371678922

Apollo는 AWS AppSync에서 작동합니까? 우리는 이미 GraphQL 서버를 보유하고 있으며 AWS 솔루션(예: Lamda, DynamoDB, Elastic Search)이 아닌 서버를 사용하여 쿼리 및 변형을 위한 오프라인 클라이언트 캐싱이 필요합니다.

그것이 작동하기를 바랍니다.

@masull 정말 놀랍습니다. 나는 시도했지만 Firebase 또는 구문 분석 플랫폼이 저에게 적합하다고 생각하지 않았으므로 이 기능이 있으면 영광일 것입니다.
많은 패키지로 모든 것을 설정하는 데 어려움을 겪고 있습니다. 전혀 재미가 없습니다. :)