Skip to content

Commit 9e887c6

Browse files
authored
Merge pull request #4257 from jonorl/fix-apollo-hooks-link
Part 10c: Update legacy Apollo useQuery link
2 parents 7100c1b + 38846da commit 9e887c6

3 files changed

Lines changed: 4 additions & 4 deletions

File tree

src/content/10/en/part10c.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ The first option is fairly decent, however, if components <em>B</em> and <em>C</
311311

312312
We want to replace the Fetch API implementation in the <em>useRepositories</em> hook with a GraphQL query. Open the Apollo Sandbox at [http://localhost:4000](http://localhost:4000) and take a look at the documentation next to the operations editor. Look up the <em>repositories</em> query. The query has some arguments, however, all of these are optional so you don't need to specify them. In the Apollo Sandbox form a query for fetching the repositories with the fields you are currently displaying in the application. The result will be paginated and it contains the up to first 30 results by default. For now, you can ignore the pagination entirely.
313313

314-
Once the query is working in the Apollo Sandbox, use it to replace the Fetch API implementation in the <em>useRepositories</em> hook. This can be achieved using the [useQuery](https://www.apollographql.com/docs/react/api/react/hooks/#usequery) hook. The <em>gql</em> template literal tag can be imported from the <i>@apollo/client</i> library as instructed earlier. Consider using the structure recommended earlier for the GraphQL related code. To avoid future caching issues, use the *cache-and-network* [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy) in the query. It can be used with the <em>useQuery</em> hook like this:
314+
Once the query is working in the Apollo Sandbox, use it to replace the Fetch API implementation in the <em>useRepositories</em> hook. This can be achieved using the [useQuery](https://www.apollographql.com/docs/react/api/react/useQuery) hook. The <em>gql</em> template literal tag can be imported from the <i>@apollo/client</i> library as instructed earlier. Consider using the structure recommended earlier for the GraphQL related code. To avoid future caching issues, use the *cache-and-network* [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy) in the query. It can be used with the <em>useQuery</em> hook like this:
315315

316316
```javascript
317317
useQuery(MY_QUERY, {

src/content/10/es/part10c.md

Lines changed: 1 addition & 1 deletion
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#setting-a-fetch-policy) _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/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, {

src/content/10/zh/part10c.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -351,8 +351,8 @@ components/
351351
<!-- We want to replace the Fetch API implementation in the <em>useRepositories</em> hook with a GraphQL query. Open the Apollo Sandbox at [http://localhost:4000](http://localhost:4000) and take a look at the documentation next to the operations editor. Look up the <em>repositories</em> query. The query has some arguments, however, all of these are optional so you don't need to specify them. In the Apollo Sandbox form a query for fetching the repositories with the fields you are currently displaying in the application. The result will be paginated and it contains the up to first 30 results by default. For now, you can ignore the pagination entirely.-->
352352
我们想用GraphQL查询取代<em>useRepositories</em>钩中的Fetch API实现。在[http://localhost:4000](http://localhost:4000)打开Apollo沙盒,看一下操作编辑器旁边的文档。查一下<em>repositories</em>查询。该查询有一些参数,然而,所有这些参数都是可选的,所以你不需要指定它们。在Apollo沙盒中形成一个查询,以获取你目前在应用中显示的字段的存储库。结果将被分页,默认情况下,它最多包含前30个结果。现在,你可以完全忽略分页。
353353

354-
<!-- Once the query is working in the Apollo Sandbox, use it to replace the Fetch API implementation in the <em>useRepositories</em> hook. This can be achieved using the [useQuery](https://www.apollographql.com/docs/react/api/react/hooks/#usequery) hook. The <em>gql</em> template literal tag can be imported from the <i>@apollo/client</i> library as instructed earlier. Consider using the structure recommended earlier for the GraphQL related code. To avoid future caching issues, use the _cache-and-network_ [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy) in the query. It can be used with the <em>useQuery</em> hook like this:-->
355-
一旦查询在Apollo沙盒中工作,用它来替换<em>useRepositories</em>钩中的Fetch API实现。这可以通过[useQuery](https://www.apollographql.com/docs/react/api/react/hooks/#usequery)挂钩实现。<em>gql</em>模板字面标签可以按照前面的指示从<i>@apollo/client</i>库导入。考虑在GraphQL相关代码中使用前面推荐的结构。为了避免将来的缓存问题,在查询中使用_cache-and-network_ [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy)。它可以像这样与<em>useQuery</em>钩子一起使用。
354+
<!-- Once the query is working in the Apollo Sandbox, use it to replace the Fetch API implementation in the <em>useRepositories</em> hook. This can be achieved using the [useQuery](https://www.apollographql.com/docs/react/api/react/useQuery) hook. The <em>gql</em> template literal tag can be imported from the <i>@apollo/client</i> library as instructed earlier. Consider using the structure recommended earlier for the GraphQL related code. To avoid future caching issues, use the _cache-and-network_ [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy) in the query. It can be used with the <em>useQuery</em> hook like this:-->
355+
一旦查询在Apollo沙盒中工作,用它来替换<em>useRepositories</em>钩中的Fetch API实现。这可以通过[useQuery](https://www.apollographql.com/docs/react/api/react/useQuery)挂钩实现。<em>gql</em>模板字面标签可以按照前面的指示从<i>@apollo/client</i>库导入。考虑在GraphQL相关代码中使用前面推荐的结构。为了避免将来的缓存问题,在查询中使用_cache-and-network_ [fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy)。它可以像这样与<em>useQuery</em>钩子一起使用。
356356

357357
```javascript
358358
useQuery(MY_QUERY, {

0 commit comments

Comments
 (0)