You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/10/en/part10c.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -798,7 +798,7 @@ To learn more about these use cases, read Kent C. Dodds' enlightening article [H
798
798
799
799
Improve the <em>useSignIn</em> hook so that it stores the user's access token retrieved from the <i>authenticate</i> mutation. The return value of the hook should not change. The only change you should make to the <em>SignIn</em> component is that you should redirect the user to the reviewed repositories list view after a successful sign in. You can achieve this by using the [useNavigate](https://api.reactrouter.com/v7/functions/react_router.useNavigate.html) hook.
800
800
801
-
After the <i>authenticate</i> mutation has been executed and you have stored the user's access token to the storage, you should reset the Apollo Client's store. This will clear the Apollo Client's cache and re-execute all active queries. You can do this by using the Apollo Client's [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.resetStore) method. You can access the Apollo Client in the <em>useSignIn</em> hook using the [useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient) hook. Note that the order of the execution is crucial and should be the following:
801
+
After the <i>authenticate</i> mutation has been executed and you have stored the user's access token to the storage, you should reset the Apollo Client's store. This will clear the Apollo Client's cache and re-execute all active queries. You can do this by using the Apollo Client's [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore) method. You can access the Apollo Client in the <em>useSignIn</em> hook using the [useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient) hook. Note that the order of the execution is crucial and should be the following:
802
802
803
803
```javascript
804
804
const { data } =awaitmutate(/* options */);
@@ -823,7 +823,7 @@ You will probably end up with the <em>null</em> result. This is because the Apol
823
823
824
824
Open the <em>AppBar</em> component in the <i>AppBar.jsx</i> file where you currently have the tabs "Repositories" and "Sign in". Change the tabs so that if the user is signed in the tab "Sign out" is displayed, otherwise show the "Sign in" tab. You can achieve this by using the <em>me</em> query with the [useQuery](https://www.apollographql.com/docs/react/api/react/hooks/#usequery) hook.
825
825
826
-
Pressing the "Sign out" tab should remove the user's access token from the storage and reset the Apollo Client's store with the [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.resetStore) method. Calling the <em>resetStore</em> method should automatically re-execute all active queries which means that the <em>me</em> query should be re-executed. Note that the order of execution is crucial: access token must be removed from the storage <i>before</i> the Apollo Client's store is reset.
826
+
Pressing the "Sign out" tab should remove the user's access token from the storage and reset the Apollo Client's store with the [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore) method. Calling the <em>resetStore</em> method should automatically re-execute all active queries which means that the <em>me</em> query should be re-executed. Note that the order of execution is crucial: access token must be removed from the storage <i>before</i> the Apollo Client's store is reset.
827
827
828
828
This was the last exercise in this section. It's time to push your code to GitHub and mark all of your finished exercises to the [exercise submission system](https://studies.cs.helsinki.fi/stats/courses/fs-react-native-2020). Note that exercises in this section should be submitted to the part 3 in the exercise submission system.
Copy file name to clipboardExpand all lines: src/content/10/es/part10c.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -292,7 +292,7 @@ La primera opción es bastante decente, sin embargo, si los componentes <em>B</e
292
292
293
293
Queremos reemplazar la implementación de la API Fetch en el hook <em>useRepositories</em> con una consulta GraphQL. Abra GraphQL Playground en [http://localhost:5000/graphql](http://localhost:5000/graphql) y abra la documentación haciendo clic en la pestaña <i>docs</i>. Busque la consulta <em>repositorios</em>. La consulta tiene algunos argumentos, sin embargo, todos estos son opcionales, por lo que no es necesario que los especifique. En GraphQL Playground, forme una consulta para buscar los repositorios con los campos que está mostrando actualmente en la aplicación. El resultado se paginará y contiene los primeros 30 resultados de forma predeterminada. Por ahora, puede ignorar la paginación por completo.
294
294
295
-
Una vez que la consulta esté funcionando en GraphQL Playground, úsela para reemplazar la implementación de la API Fetch en el hook <em>useRepositories</em>. Esto se puede lograr usando el hook [useQuery](https://www.apollographql.com/docs/react/api/react-hooks/#usequery). La etiqueta literal de plantilla <em>gql</em> se puede importar desde Apollo Boost como se indicó anteriormente. Considere usar la estructura recomendada anteriormente para el código relacionado con GraphQL. Para evitar problemas futuros de almacenamiento en caché, use la [política de recuperación](https://www.apollographql.com/docs/react/data/queries/#configuring-fetch-logic)_cache-and-network_ en la consulta. Se puede usar con el hook <em>useQuery</em> como este:
295
+
Una vez que la consulta esté funcionando en GraphQL Playground, úsela para reemplazar la implementación de la API Fetch en el hook <em>useRepositories</em>. Esto se puede lograr usando el hook [useQuery](https://www.apollographql.com/docs/react/api/react-hooks/#usequery). La etiqueta literal de plantilla <em>gql</em> se puede importar desde Apollo Boost como se indicó anteriormente. Considere usar la estructura recomendada anteriormente para el código relacionado con GraphQL. Para evitar problemas futuros de almacenamiento en caché, use la [política de recuperación](https://www.apollographql.com/docs/react/data/queries#setting-a-fetch-policy)_cache-and-network_ en la consulta. Se puede usar con el hook <em>useQuery</em> como este:
296
296
297
297
```javascript
298
298
useQuery(MY_QUERY, {
@@ -723,7 +723,7 @@ La capacidad de proporcionar datos a los descendientes de componentes abre tonel
723
723
724
724
Mejore el hook <em>useSignIn</em> para que almacene el token de acceso del usuario recuperado de la mutación <i>authorize</i>. El valor de retorno del hook no debería cambiar. El único cambio que debe realizar en el componente <em> SignIn </em> es que debe redirigir al usuario a la vista de lista de repositorios revisados después de un inicio de sesión exitoso. Puede lograrlo usando [useHistory](https://reacttraining.com/react-router/native/api/Hooks/usehistory) y el método [push](https://reacttraining.com/react-router/native/api/history) del historial.
725
725
726
-
Después de que se haya ejecutado la mutación <i>authorize</i> y haya almacenado el token de acceso del usuario en el almacenamiento, debe restablecer la tienda del cliente Apollo. Esto borrará la memoria caché del cliente Apollo y volverá a ejecutar todas las consultas activas. Puede hacer esto usando el método [resetStore](https://www.apollographql.com/docs/react/v2.5/api/apollo-client/#ApolloClient.resetStore) del cliente Apollo. Puede acceder al cliente Apollo en el hook <em>useSignIn</em> usando el hook [useApolloClient](https://www.apollographql.com/docs/react/api/react-hooks/#useapolloclient). Tenga en cuenta que el orden de ejecución es crucial y debe ser el siguiente:
726
+
Después de que se haya ejecutado la mutación <i>authorize</i> y haya almacenado el token de acceso del usuario en el almacenamiento, debe restablecer la tienda del cliente Apollo. Esto borrará la memoria caché del cliente Apollo y volverá a ejecutar todas las consultas activas. Puede hacer esto usando el método [resetStore](https://www.apollographql.com/docs/react/v2.5/api/apollo-client/#ApolloClient.resetStore) del cliente Apollo. Puede acceder al cliente Apollo en el hook <em>useSignIn</em> usando el hook [useApolloClient](https://www.apollographql.com/docs/react/api/react/useApolloClient). Tenga en cuenta que el orden de ejecución es crucial y debe ser el siguiente:
Copy file name to clipboardExpand all lines: src/content/10/es/part10d.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -504,7 +504,7 @@ Puede crear una revisión mediante la mutación <em>createReview</em>. Verifique
504
504
505
505
Después de una mutación de <em>createReview</em> exitosa, redirija al usuario a la vista del repositorio que implementó en el ejercicio anterior. Esto se puede hacer con el método <em>history.push</em> después de haber obtenido el objeto de historial usando el hook [useHistory](https://reacttraining.com/react-router/native/api/Hooks/usehistory). La revisión creada tiene un campo <em>repositoryId</em> que puede usar para construir la ruta de la dirección.
506
506
507
-
Para evitar la obtención de datos almacenados en caché con la consulta de <em>repository</em> en la vista de repositorio único, use la [política de recuperación](https://www.apollographql.com/docs/react/data/queries/#configuring-fetch-logic)_caché-and-network_ en la consulta. Se puede usar con el hook <em>useQuery</em> como este:
507
+
Para evitar la obtención de datos almacenados en caché con la consulta de <em>repository</em> en la vista de repositorio único, use la [política de recuperación](https://www.apollographql.com/docs/react/data/queries#setting-a-fetch-policy)_caché-and-network_ en la consulta. Se puede usar con el hook <em>useQuery</em> como este:
Copy file name to clipboardExpand all lines: src/content/10/zh/part10c.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -871,8 +871,8 @@ const useSignIn = () => {
871
871
<!-- Improve the <em>useSignIn</em> hook so that it stores the user's access token retrieved from the <i>authenticate</i> mutation. The return value of the hook should not change. The only change you should make to the <em>SignIn</em> component is that you should redirect the user to the reviewed repositories list view after a successful sign in. You can achieve this by using the [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) hook.-->
<!-- After the <i>authenticate</i> mutation has been executed and you have stored the user's access token to the storage, you should reset the Apollo Client's store. This will clear the Apollo Client's cache and re-execute all active queries. You can do this by using the Apollo Client's [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.resetStore) method. You can access the Apollo Client in the <em>useSignIn</em> hook using the [useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient) hook. Note that the order of the execution is crucial and should be the following:-->
<!-- After the <i>authenticate</i> mutation has been executed and you have stored the user's access token to the storage, you should reset the Apollo Client's store. This will clear the Apollo Client's cache and re-execute all active queries. You can do this by using the Apollo Client's [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore) method. You can access the Apollo Client in the <em>useSignIn</em> hook using the [useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient) hook. Note that the order of the execution is crucial and should be the following:-->
<!-- Open the <em>AppBar</em> component in the <i>AppBar.jsx</i> file where you currently have the tabs "Repositories" and "Sign in". Change the tabs so that if the user is signed in the tab "Sign out" is displayed, otherwise show the "Sign in" tab. You can achieve this by using the <em>me</em> query with the [useQuery](https://www.apollographql.com/docs/react/api/react/hooks/#usequery) hook.-->
901
901
打开<i>AppBar.jsx</i>文件中的<em>AppBar</em>组件,目前有 "Repositories "和 "Sign in "标签。改变这些标签,如果用户已经登录,就显示 "退出 "标签,否则就显示 "登录 "标签。你可以通过使用带有[useQuery](https://www.apollographql.com/docs/react/api/react/hooks/#usequery)钩子的<em>me</em>查询来实现这一点。
902
902
903
-
<!-- Pressing the "Sign out" tab should remove the user's access token from the storage and reset the Apollo Client's store with the [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.resetStore) method. Calling the <em>resetStore</em> method should automatically re-execute all active queries which means that the <em>me</em> query should be re-executed. Note that the order of execution is crucial: access token must be removed from the storage <i>before</i> the Apollo Client's store is reset.-->
<!-- Pressing the "Sign out" tab should remove the user's access token from the storage and reset the Apollo Client's store with the [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore) method. Calling the <em>resetStore</em> method should automatically re-execute all active queries which means that the <em>me</em> query should be re-executed. Note that the order of execution is crucial: access token must be removed from the storage <i>before</i> the Apollo Client's store is reset.-->
<!-- This was the last exercise in this section. It's time to push your code to GitHub and mark all of your finished exercises to the [exercise submission system](https://studies.cs.helsinki.fi/stats/courses/fs-react-native-2020). Note that exercises in this section should be submitted to the part 3 in the exercise submission system.-->
Copy file name to clipboardExpand all lines: src/content/8/en/part8d.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -115,7 +115,7 @@ Use of the effect hook is necessary to avoid an endless rendering loop.
115
115
Let's also add a button which enables a logged-in user to log out. The button's onClick handler sets the *token* state to null, removes the token from local storage and resets the cache of the Apollo client. The last step is [important](https://www.apollographql.com/docs/react/networking/authentication/#reset-store-on-logout), because some queries might have fetched data to cache, which only logged-in users should have access to.
116
116
117
117
We can reset the cache using the [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore) method of an Apollo *client* object.
118
-
The client can be accessed with the [useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks#useapolloclient) hook:
118
+
The client can be accessed with the [useApolloClient](https://www.apollographql.com/docs/react/api/react/useApolloClient) hook:
Copy file name to clipboardExpand all lines: src/content/8/es/part8d.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -117,8 +117,8 @@ El uso del hook de efectos es necesario para evitar un bucle de renderizado sin
117
117
118
118
Agreguemos también un botón que permite a un usuario que ha iniciado sesión cerrar la sesión. El controlador onClick del botón establece el estado _token_ en nulo, elimina el token del almacenamiento local y restablece la caché del cliente Apollo. El último paso es [importante](https://www.apollographql.com/docs/react/networking/authentication/#reset-store-on-logout), porque algunas consultas pueden haber obtenido datos en la caché, que solo los usuarios que iniciaron sesión deben tener acceso.
119
119
120
-
Podemos restablecer la caché usando el método [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.resetStore) de un objeto _client_ de Apollo.
121
-
Se puede acceder al cliente con el hook [useApolloClient](https://www.apollographql.com/docs/react/api/react-hooks/#useapolloclient):
120
+
Podemos restablecer la caché usando el método [resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore) de un objeto _client_ de Apollo.
121
+
Se puede acceder al cliente con el hook [useApolloClient](https://www.apollographql.com/docs/react/api/react/useApolloClient):
122
122
123
123
```js
124
124
constApp= () => {
@@ -277,7 +277,7 @@ Usando la función [updateQuery](https://www.apollographql.com/docs/react/cachin
277
277
278
278
En algunas situaciones, la única forma sensata de mantener el caché actualizado es usando la devolución de llamada _update_.
279
279
280
-
Cuando sea necesario, es posible deshabilitar el caché para toda la aplicación o [consultas únicas](https://www.apollographql.com/docs/react/api/react/hooks/#options) configurando el campo que administra el uso del caché , [fetchPolicy](https://www.apollographql.com/docs/react/data/queries/#configuring-fetch-logic) como <em>sin caché</em>.
280
+
Cuando sea necesario, es posible deshabilitar el caché para toda la aplicación o [consultas únicas](https://www.apollographql.com/docs/react/api/react/hooks/#options) configurando el campo que administra el uso del caché , [fetchPolicy](https://www.apollographql.com/docs/react/data/queries#setting-a-fetch-policy) como <em>sin caché</em>.
281
281
282
282
Sea diligente con el caché. Los datos antiguos en la caché pueden causar errores difíciles de encontrar. Como sabemos, mantener el caché actualizado es un gran desafío. Según un proverbio codificador:
0 commit comments