Queries

A pasta Queries abriga os arquivos .graphql a serem executados nas renderizações das páginas e dos snippets.

Exemplo de query

Segue um exemplo de query para pesquisar a palavra "tenis". O retorno apresentará os primeiros dois produtos com os campos solicitados:

GraphQL

query {
  search(query:"tenis") {
    products(first:2) {
      edges {
        cursor
        node {
          id
          productId
          productName
          productVariantId
        }
      }
    }
  }
}

Retorno

O retorno para a query realizada anteriormente é o seguinte:

JSON

{
  "data": {
    "search": {
      "products": {
        "edges": [
          {
            "cursor": "eyJPZmZzZXQiOjF9",
            "node": {
              "id": "eyJFbnRpdHkiOiJQcm9kdWN0IiwiSWQiOjM3MjQ2N30=",
              "productId": 175349,
              "productName": "Tênis Modare Casual 7339.200.19046.52531",
              "productVariantId": 372467
            }
          },
          {
            "cursor": "eyJPZmZzZXQiOjJ9",
            "node": {
              "id": "eyJFbnRpdHkiOiJQcm9kdWN0IiwiSWQiOjM3MjQ2MX0=",
              "productId": 175348,
              "productName": "Tênis Modare Casual Feminino 7354.100.20858.76088",
              "productVariantId": 372461
            }
          }
        ]
      }
    }
  }
}

📘

Nota

O objeto json de retorno da query é exatamente o que será injetado na página. Então no caso do retorno acima, por exemplo, para ter acesso ao objeto products, é necessário utilizar:

{{ data.search.products }}

Utilização em Pages

Para utilizar as Queries em páginas, basta definir o caminho na propriedade query dentro de Configs/pages.json:

JSON

{
    "type": "search",
    "path": "search.html",
    "query": "search.graphql"
}

Utilização em Snippets

Para utilizar as Queries em snippets, basta informar o caminho na chamada de renderização de snippets através do SDK Javascript:

JavaScript

const response = await client.snippet.render("snippet.html", "query.graphql", variables);

Caminhos personalizados

É possível salvar queries dentro de subpastas em Queries. Para utilizá-las, basta informar os subdiretórios criados em suas respectivas chamadas:

JSON

{
    "type": "search",
    "path": "search.html",
    "query": "Search/search.graphql"
}

JavaScript

const response = await client.snippet.render("snippet.html", "Snippet/query.graphql", variables);

Query common

Dentro da pasta Queries existe um arquivo chamado common.graphql. Essa query é executada em todas as renderizações de páginas. Dessa forma, informações comuns em todas as páginas podem ser descritas em apenas uma única query, evitando duplicações.

Como utilizar

Para utilizar os objetos da query common.graphql, é possível realizar a chamada Scriban:

{{ common. ... }}