Step1: 웹뷰에서 공유해야 할 Data를 모바일로 전달하여 Cache 하기(mobile, web)

이 단계에서는 웹 애플리케이션에서 데이터를 공유하고, 이를 모바일 환경에서 캐시하는 과정에 대해 설명합니다. 주로 **웹뷰(WebView)**와 모바일 환경 간의 데이터 전달 및 캐시 저장 작업을 다룹니다. 아래는 useDeviceCache 훅을 활용하여 데이터를 웹뷰에서 모바일로 전달하고, 모바일 디바이스에서 이를 캐시하는 흐름입니다.

모바일에서 웹뷰로부터 받은 데이터를 저장할 준비하기

const [apolloCache, setApolloCache] = useState({});

• apolloCache는 Apollo 클라이언트의 캐시 데이터를 저장하는 상태입니다.
• 기본값은 빈 객체({})입니다.

const createDeviceCacheForApolloSet = (variables) => {
  const { operationName, printedQuery, data } = variables;
  setApolloCache((prev) => ({
    ...prev,
    [operationName]: { printedQuery, data },
  }));
  onResponse({
    createDeviceCacheForApolloSet: {
      message: "저장완료",
    },
  });
};

• 이 함수는 새로운 데이터를 Apollo 캐시에 저장합니다.
  • 입력값:
    • operationName: 요청 이름 (예: fetchBoards).
    • printedQuery: GraphQL 쿼리 문자열.
    • data: 요청 결과 데이터 (예: { writer: "철수", title: "안녕하세요" }).
  • 작동:
    • 기존 apolloCache 상태를 복사한 뒤(...prev) 새로운 데이터를 추가합니다.
    • 각 요청(operationName)을 키(key)로 사용하여 데이터(printedQuery, data)를 저장합니다.

const fetchDeviceCacheForApolloSet = () => {
  onResponse({
    fetchDeviceCacheForApolloSet: { ...apolloCache },
  });
};

• 이 함수는 현재 저장된 apolloCache 상태를 전달합니다.

<aside> 💡

• 전체 코드 </aside>

웹뷰에서 모바일로 캐시할 Data 보내기

const operationName = operation.operationName;
const isSharedCache = operationName === "fetchBoards";

• operationName: 현재 요청의 이름입니다. 예: fetchBoards
• 특정 요청(fetchBoards)에 대해서만 데이터를 모바일로 전달하려고 합니다.
  • 이를 통해, 모든 요청이 아닌 필요한 요청만 조건부로 처리할 수 있습니다

if (isSharedCache) {
  fetchApp({
    query: "createDeviceCacheForApolloSet",
    variables: {
      operationName, // 예: fetchBoards
      printedQuery: print(operation.query), // 쿼리를 문자열로 변환 (GraphQL Document Node → String)
      variables: operation.variables, // 요청 시 사용된 변수들
      data: res.data, // 서버로부터 받은 실제 응답 데이터
    },
  });
}