Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

Tradução completa do arquivo using-fragments.md #136

Merged
merged 9 commits into from
Jan 9, 2020
38 changes: 19 additions & 19 deletions docs/docs/using-fragments.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
---
title: Using Fragments
title: Utilizando Fragmentos
---

Fragments allow you to reuse parts of GraphQL queries. It also allows you to split up complex queries into smaller, easier to understand components.
Fragmentos permitem a reutilização de consultas GraphQL. Elas também permitem a divisão de consultas complexas em componentes menores e de fácil compreensão.

## The building blocks of a fragment
## Os blocos que compõem um fragmento

Here is an example fragment:
Aqui temos um exemplo de fragmento:

```graphql
fragment FragmentName on TypeName {
field1
field2
campo1
campo2
}
```

A fragment consists of three components:
Um fragmento consiste de três componentes:

1. `FragmentName`: the name of the fragment that will be referenced later.
2. `TypeName`: the [GraphQL type](https://graphql.org/graphql-js/object-types/) of the object the fragment will be used on. This is important because you can only query for fields that actually exist on a given object.
3. The body of the query. You can define any fields with any level of nesting in here, the same that you would elsewhere in a GraphQL query
1. `FragmentName`: o nome do fragmento que será referenciado posteriormente.
Copy link
Contributor

@rafaeelaudibert rafaeelaudibert Jan 3, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

O que você acha, será que não deveriamos traduzir FragmentName e TypeName?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Meu pensamento inicial foi o seguinte: FragmentName é o nome dado pelo desenvolvedor para o Fragmento, não é um termo específico em inglês. Então achei que a compreensão do tipo de informação para quem está iniciando ou não sabe inglês seria mais fácil estando traduzido, evitando confusão com o resto do código. TypeName eu traduzi pq, apesar de tecnicamente fazer parte do código (pensando que será substituído por umTypeName em inglês), imaginei que, na parte do manual que abordar os TypeNames, o termo seria traduzido, já que é apenas referencia a termos.
Com a sugestão de manter o termo original, imaginei que se trata de algum padrão já adotado em outras partes da tradução, e aí já acatei.

2. `TypeName`: o [tipo de objeto GraphQL](https://graphql.org/graphql-js/object-types/) no qual o fragmento será utilizado. Isso é importante porque só é possível consultar campos que existam em um determinado objeto.
3. O corpo da consulta. Pode-se definir quaisquer campos em qualquer nível de aninhamento, da mesma maneira que seria feito em outras consultas GraphQL.

## Creating and using a fragment
## Criando e utilizando um fragmento

A fragment can be created inside any GraphQL query, but it's good practice to create the query separately. More organization advice in the [Conceptual Guide](/docs/querying-with-graphql/#fragments).
Um fragmento pode ser criado dentro de qualquer consulta GraphQL, mas é uma boa prática criar a consulta separadamente. Mais conselhos organizacionais no [Guia Conceitual](/docs/querying-with-graphql/#fragments).

```jsx:title=src/components/IndexPost.jsx
import React from "react"
Expand All @@ -43,7 +43,7 @@ export const query = graphql`
`
```

This defines a fragment named `SiteInformation`. Now it can be used from within the page's GraphQL query:
Isto define um fragmento chamado `SiteInformation`. Agora, ele pode ser utilizado internamente na busca GraphQL da página:

```jsx:title=src/pages/main.jsx
import React from "react"
Expand All @@ -57,8 +57,8 @@ export default ({ data }) => {
<p>{data.site.siteMetadata.siteDescription}</p>

{/*
Or you can pass all the data from the fragment
back to the component that defined it
Ou é possível passar todos os dados do fragmento
de volta ao componente que o definiu
*/}
<IndexPost siteInformation={data.site.siteMetadata} />
</div>
Expand All @@ -74,9 +74,9 @@ export const query = graphql`
`
```

When compiling your site, Gatsby preprocesses all GraphQL queries it finds. Therefore, any file that gets included in your project can define a snippet. However, only Pages can define GraphQL queries that actually return data. This is why we can define the fragment in the component file - it doesn't actually return any data directly.
Ao compilar o site, o Gatsby pré-processa todas as consultas GraphQL encontradas, portanto, qualquer arquivo incluso no seu projeto pode definir um trecho. No entanto, apenas Páginas podem definir consultas GraphQL que realmente retornem dados, por isso que é possível definir fragmentos no arquivo do componente - ele não retorna nenhum dado diretamente.

## Further reading
## Leituras Adicionais

- [Querying Data with GraphQL - Fragments](/docs/querying-with-graphql/#fragments)
- [GraphQL Docs - Fragments](https://graphql.org/learn/queries/#fragments)
- [Consultando Dados com GraphQL - Fragmentos](/docs/querying-with-graphql/#fragments)
- [Documentação GraphQL - Fragmentos](https://graphql.org/learn/queries/#fragments)