v2.3으로 업그레이드

v2의 가용 날짜 이전에 생성된 PWA Kit 프로젝트를 업그레이드하려면 v2로 업그레이드 가이드의 지침을 따르십시오.

v2.3에서 제공되는 옵트인 기능, 특히 react-query 통합 기능을 활용하려면 PWA Kit 프로젝트에서 _app-config/index.js, _app/index.js 및 package.json에 몇 가지 변경 사항을 적용해야 합니다.

_app-config/index.js를 열고 다음과 같이 변경합니다.

react-query를 활성화하고 getProps 지원을 유지하는 데 필요한 상위 구성요소를 가져옵니다.

권장 React Query 구성을 사용하여 options 오브젝트를 추가합니다.

내보낸 AppConfig 구성요소 정의를 업데이트합니다.

_app/index.js를 열고 다음과 같이 변경합니다.

DEFAULT_LOCALE이라는 변수를 선언하여 애플리케이션에 메시지를 표시하기 위한 기본 로캘을 저장합니다. 새로 생성된 프로젝트의 경우, 기본 메시지는 미국 로캘의 영어로 작성됩니다. 기본 메시지를 다시 작성하지 않은 경우, DEFAULT_LOCALE의 올바른 값은 en-US입니다. 그렇지 않으면 DEFAULT_LOCALE을 fr-fr 또는 ja-jp와 같은 다른 값으로 설정합니다.

DEFAULT_LOCALE을 targetLocale 속성의 기본값으로 할당합니다.

defaultLocale을 새 정적 값으로 바꿉니다.

활성화된 경우 useQuery 및 getProps 함수가 병렬로 실행됩니다. 병렬 실행의 부작용으로서, getProps의 반환 값을 기반으로 구성요소를 조건부로 렌더링할 경우 일부 useQuery 후크가 서버에서 실행되지 않을 수 있습니다. 단순화를 위해 getProps 또는 useQuery 중 하나를 선택하여 데이터를 가져오는 것이 좋습니다.

devDependencies에 react-query를 추가합니다.

변경 사항이 성공적으로 적용되었는지 확인하려면 다음 명령을 실행합니다.

  1. npm install은 필요한 react-query 종속 구성요소를 설치합니다.
  2. npm start는 앱을 로컬로 실행할 수 있는지 확인합니다.
  3. npm run build는 빌드 프로세스가 성공적으로 실행되었는지 확인합니다.
  4. npm run push(및 Runtime Admin을 통해 배포)는 번들이 성공적으로 배포되었는지 확인합니다.

React Query와 사용 방법에 대한 자세한 내용은 React Query 설명서를 참조하십시오.