Skip to content

Commit d912ae7

Browse files
committed
Fix broken links
1 parent a58b1bc commit d912ae7

File tree

8 files changed

+22
-22
lines changed

8 files changed

+22
-22
lines changed

src/content/10/en/part10c.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -798,7 +798,7 @@ To learn more about these use cases, read Kent C. Dodds' enlightening article [H
798798

799799
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.
800800

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:
802802

803803
```javascript
804804
const { data } = await mutate(/* options */);
@@ -823,7 +823,7 @@ You will probably end up with the <em>null</em> result. This is because the Apol
823823

824824
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.
825825

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.
827827

828828
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.
829829
</div>

src/content/10/es/part10c.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ La primera opción es bastante decente, sin embargo, si los componentes <em>B</e
292292

293293
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.
294294

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:
296296

297297
```javascript
298298
useQuery(MY_QUERY, {
@@ -723,7 +723,7 @@ La capacidad de proporcionar datos a los descendientes de componentes abre tonel
723723

724724
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.
725725

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:
727727

728728
```javascript
729729
const { data } = await mutate(/* options */);

src/content/10/es/part10d.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -504,7 +504,7 @@ Puede crear una revisión mediante la mutación <em>createReview</em>. Verifique
504504

505505
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.
506506

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:
508508

509509
```javascript
510510
useQuery(GET_REPOSITORY, {

src/content/10/zh/part10c.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -871,8 +871,8 @@ const useSignIn = () => {
871871
<!-- 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.-->
872872
改进<em>useSignIn</em>钩子,使其存储从<i>authenticate</i>改变中获取的用户访问令牌。该钩子的返回值不应该改变。你应该对<em>SignIn</em>组件做出的唯一改变是,你应该在成功登录后将用户重定向到已审核的存储库列表视图。你可以通过使用[useNavigate](https://reactrouter.com/en/main/hooks/use-navigate)钩子来实现这一点。
873873

874-
<!-- 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:-->
875-
在<i>authenticate</i>改变被执行后,你已经将用户的访问令牌存储到存储区,你应该重置Apollo客户端的存储。这将清除Apollo客户端的缓存并重新执行所有活动的查询。你可以通过使用Apollo客户端的[resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.resetStore)方法来做到这一点。你可以使用[useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient)钩子访问<em>useSignIn</em>钩子中的Apollo客户端。注意,执行的顺序很关键,应该是这样的。
874+
<!-- 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:-->
875+
在<i>authenticate</i>改变被执行后,你已经将用户的访问令牌存储到存储区,你应该重置Apollo客户端的存储。这将清除Apollo客户端的缓存并重新执行所有活动的查询。你可以通过使用Apollo客户端的[resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore)方法来做到这一点。你可以使用[useApolloClient](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient)钩子访问<em>useSignIn</em>钩子中的Apollo客户端。注意,执行的顺序很关键,应该是这样的。
876876

877877
```javascript
878878
const { data } = await mutate(/* options */);
@@ -900,8 +900,8 @@ apolloClient.resetStore();
900900
<!-- 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.-->
901901
打开<i>AppBar.jsx</i>文件中的<em>AppBar</em>组件,目前有 "Repositories "和 "Sign in "标签。改变这些标签,如果用户已经登录,就显示 "退出 "标签,否则就显示 "登录 "标签。你可以通过使用带有[useQuery](https://www.apollographql.com/docs/react/api/react/hooks/#usequery)钩子的<em>me</em>查询来实现这一点。
902902

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.-->
904-
按下 "签出 "标签应该从存储中删除用户的访问令牌,并用[resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.resetStore)方法重置Apollo客户端的存储。调用<em>resetStore</em>方法应该自动重新执行所有活动的查询,这意味着<em>me</em>查询应该被重新执行。请注意,执行的顺序是至关重要的:访问令牌必须在<i></i>Apollo客户端的存储被重置之前从存储中移除。
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#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.-->
904+
按下 "签出 "标签应该从存储中删除用户的访问令牌,并用[resetStore](https://www.apollographql.com/docs/react/api/core/ApolloClient#resetstore)方法重置Apollo客户端的存储。调用<em>resetStore</em>方法应该自动重新执行所有活动的查询,这意味着<em>me</em>查询应该被重新执行。请注意,执行的顺序是至关重要的:访问令牌必须在<i></i>Apollo客户端的存储被重置之前从存储中移除。
905905

906906
<!-- 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.-->
907907
这是本节的最后一个练习。现在是时候把你的代码推送到GitHub,并把你所有完成的练习标记到[练习提交系统](https://studies.cs.helsinki.fi/stats/courses/fs-react-native-2020)。注意,本节的练习应该提交到练习提交系统中的第3章节。

src/content/8/en/part8d.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ Use of the effect hook is necessary to avoid an endless rendering loop.
115115
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.
116116

117117
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:
119119

120120
```js
121121
const App = () => {

src/content/8/es/part8d.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@ El uso del hook de efectos es necesario para evitar un bucle de renderizado sin
117117

118118
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.
119119

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):
122122

123123
```js
124124
const App = () => {
@@ -277,7 +277,7 @@ Usando la función [updateQuery](https://www.apollographql.com/docs/react/cachin
277277
278278
En algunas situaciones, la única forma sensata de mantener el caché actualizado es usando la devolución de llamada _update_.
279279
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>.
281281
282282
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:
283283

0 commit comments

Comments
 (0)