Actualización a v2.3

Si está actualizando un proyecto de PWA Kit que se creó antes de la disponibilidad de v2, siga primero las instrucciones de la guía Actualización a v2.

Important

Para aprovechar las características de participación disponibles en v2.3, específicamente la integración react-query, debe realizar algunos cambios en _app-config/index.js, _app/index.js y package.json en su proyecto de PWA Kit.

Cambios a _app-config/index.js

Abra _app-config/index.js y realice los siguientes cambios.

Importe los componentes de orden superior necesarios para habilitar react-query y conservar el soporte de getProps.

1- import {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/with-legacy-get-props'
2+ import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'

Agregue el objeto options con la configuración recomendada de React Query.

1// Determine whether the code is running server-side or client-side based on the presence of the window object. Set isServerSide to true if running server-side or false if running client-side.
2const isServerSide = typeof window === 'undefined'
3
4// Recommended settings for PWA-Kit usages.
5// NOTE: They will be applied server-side and client-side.
6const options = {
7  queryClientConfig: {
8    defaultOptions: {
9      queries: {
10        retry: false,
11        staleTime: 2 * 1000,
12
13        // If isServerSide is true, disable retries on mount.
14        ...(isServerSide ? {retryOnMount: false} : {})
15      },
16      mutations: {
17        retry: false
18      }
19    }
20  }
21}

Actualice la definición del componente AppConfig exportado.

1- export default AppConfig
2+ export default withReactQuery(withLegacyGetProps(AppConfig), options)

Cambios a _app/index.js

Abra _app/index.js y realice los siguientes cambios.

Declare una variable llamada DEFAULT_LOCALE para almacenar la configuración local predeterminada para mostrar mensajes en su aplicación. Para un proyecto recién generado, los mensajes predeterminados están escritos en inglés para la configuración local de Estados Unidos. Si no ha reescrito los mensajes predeterminados, entonces en-US es el valor correcto para DEFAULT_LOCALE. De lo contrario, establezca DEFAULT_LOCALE en un valor diferente, como fr-fr o ja-jp.

1+ const DEFAULT_LOCALE = 'en-US'

Asigne DEFAULT_LOCALE como valor predeterminado para la propiedad targetLocale.

1- const {children, targetLocale, messages, categories: allCategories = {}} = props
2+ const {
3+     children,
4+     targetLocale = DEFAULT_LOCALE,
5+     messages = {},
6+     categories: allCategories = {}
7+ } = props

Reemplace defaultLocale con el nuevo valor estático.

1- defaultLocale="en-US"
2+ defaultLocale={DEFAULT_LOCALE}

Si está habilitado, las funciones useQuery y getProps se ejecutan en paralelo. Un efecto secundario de la ejecución en paralelo es que la renderización condicional de un componente según el valor de retorno de getProps puede provocar que algunos enlaces useQuery no se ejecuten en el servidor. En aras de la simplicidad, le recomendamos que elija getProps o useQuery para la obtención de datos.

Note

Cambios a package.json

Agregue react-query a su devDependencies.

1+ "@tanstack/react-query": "^4.0.10",

Pruebas de los cambios

Para probar si sus cambios se hicieron con éxito, ejecute los siguientes comandos:

npm install para instalar la dependencia react-query requerida.
npm start para verificar que la aplicación pueda ejecutarse localmente.
npm run build para verificar que el proceso de construcción es exitoso.
npm run push (e implementar a través de Runtime Admin) para verificar que la implementación de un paquete es exitosa.

Otras lecturas

Para saber más sobre React Query y cómo usarlo, vea la documentación de React Query.