[EDU-5977] refactor: update GraphQL API Playground reference (#1434)

* refactor: add new query Playground ref - EN/PT * fix: adjust naming * Apply suggestions from code review Co-authored-by: MarianaReisAlcantara <[email protected]> * Update src/content/docs/en/pages/main-menu/additional-resources/developer-tools/graphql-playground.mdx * Update src/content/docs/pt-br/pages/menu-principal/recursos-adicionais/developer-tools/graphql-playground.mdx * Apply suggestions from code review * Update graphql-playground.mdx * Update graphql-playground.mdx --------- Co-authored-by: MarianaReisAlcantara <[email protected]>
aziontech · Jan 16, 2025 · c0efee0 · c0efee0
1 parent ba7ce58
commit c0efee0
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 11 deletions.
diff --git a/.../en/pages/main-menu/additional-resources/developer-tools/graphql-playground.mdx b/.../en/pages/main-menu/additional-resources/developer-tools/graphql-playground.mdx
@@ -1,16 +1,16 @@
 ---
-title: GraphQL API Playground
-description: Use the GraphQL API plaground to explore and understand how it works.
+title: GraphiQL Playground
+description: Use the GraphiQL playground to explore and understand how it works.
 meta_tags: 'graphql, api, playground, query'
 namespace: docs_graphql_playground
 permalink: /documentation/products/devtools/graphql-playground/
 ---
 
 import LinkButton from 'azion-webkit/linkbutton'
 
-You can see how to access the GraphQL Playground on the GraphQL API first steps documentation.
+You can see how to access the GraphiQL Playground on the GraphQL API first steps documentation.
 
-<LinkButton link="/en/documentation/devtools/graphql-api/first-steps/#accessing-graphql-playground" label="access graphql playground" severity="secondary" />
+<LinkButton link="/en/documentation/devtools/graphql-api/first-steps/#accessing-graphql-playground" label="Access GraphiQL Playground" severity="secondary" />
 
 You can use the playground to run queries or to explore how to build them. If you're just starting, you can copy and paste these queries on the playground and discover what each field represents, available operators, and even get real-time validation for erros.
 
@@ -136,7 +136,41 @@ query HttpCalculatedDataTransferred {
 }
 ```
 
-You can also modify fields and values to explore how GraphQL API and the playground work.
+:::tip
+Modify fields and values to explore how GraphQL API and the playground work.
+:::
+
+You can also test this query to filter the IPs that generated the most requests identified by the WAF as attacks to explore more possibilities in the playground:
+
+```graphql
+query TOP5IPsWAFRequests {
+  httpEvents(
+    limit: 5
+    filter: {
+      tsRange: {
+        begin:"2025-01-15T00:00:00"
+        end:"2025-01-15T20:00:00"
+      },
+      wafMatchNe: "-"
+      wafAttackFamilyNe: "-"
+    }
+    aggregate: {
+      count: rows
+    }
+    groupBy:[remoteAddress, wafAttackFamily]
+    orderBy:[count_DESC]
+  )
+  {
+    remoteAddress
+    wafAttackFamily
+    count
+  }
+}
+```
+
+:::tip
+Visit the [Guides page](/en/documentation/products/guides/#graphql-api) and the [GraphQL API documentation](/en/documentation/devtools/graphql-api/) to explore more options for querying data.
+:::
 
 Discover how to leverage the GraphiQL Playground for real-time data analysis and security insights. Watch the video below:
 <div class="cms-embed">

diff --git a/...pages/menu-principal/recursos-adicionais/developer-tools/graphql-playground.mdx b/...pages/menu-principal/recursos-adicionais/developer-tools/graphql-playground.mdx
@@ -1,5 +1,5 @@
 ---
-title: Playground da API GraphQL
+title: Playground GraphiQL
 description: Use o playground da API GraphQL para explorar como ela funciona.
 meta_tags: 'graphql, api, playground, query'
 namespace: docs_graphql_playground
@@ -8,9 +8,9 @@ permalink: /documentacao/produtos/devtools/playground-graphql/
 
 import LinkButton from 'azion-webkit/linkbutton'
 
-Você pode ver como acessar o Playground da GraphQL na documentação dos primeiros passos da API GraphQL.
+Você pode ver como acessar o Playground GraphiQL na documentação dos primeiros passos da API GraphQL.
 
-<LinkButton link="/pt-br/documentacao/devtools/graphql-api/primeiros-passos/#acessar-o-playground-graphql" label="como acessar o playground" severity="secondary" />
+<LinkButton link="/pt-br/documentacao/devtools/graphql-api/primeiros-passos/#acessar-o-playground-graphql" label="Como acessar o playground" severity="secondary" />
 
 Você pode usar o playground para executar queries ou explorar como construí-las. Se você está recém começando, você pode copiar e colar essas queries no playground e descobrir o que cada campo representa, os operadores disponíveis e até mesmo obter validação em tempo real para erros.
 
@@ -136,9 +136,38 @@ query HttpCalculatedDataTransferred {
 }
 ```
 
-Você também pode modificar os campos e os valores para explorar como a API GraphQL e o playground funcionam.
-
+:::tip
+Modifique os campos e os valores para explorar como a API GraphQL e o playground funcionam.
+:::
 
+Você também pode testar esta query para filtrar os IPs que mais geraram requisições identificadas pelo WAF como ataque para explorar mais possibilidades do playground: 
 
----
+```graphql
+query TOP5IPsWAFRequests {
+  httpEvents(
+    limit: 5
+    filter: {
+      tsRange: {
+        begin:"2025-01-15T00:00:00"
+        end:"2025-01-15T20:00:00"
+      },
+      wafMatchNe: "-"
+      wafAttackFamilyNe: "-"
+    }
+    aggregate: {
+      count: rows
+    }
+    groupBy:[remoteAddress, wafAttackFamily]
+    orderBy:[count_DESC]
+  )
+  {
+    remoteAddress
+    wafAttackFamily
+    count
+  }
+}
+```
 
+:::tip
+Visite a [página de Guias](/pt-br/documentacao/produtos/guias/#graphql-api) e a [documentação da GraphQL API](/pt-br/documentacao/devtools/graphql-api/) para explorar mais opções de consulta de dados.
+:::