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);