Consulta pelo search-graphql com alias dando erro

VTEX in your native language 🌎 Português
, , ,
1

Bom dia.
Atualmente estou implementando uma funcionalidade que preciso pegar a quantidade de items por um contexto filtrando pela marca.
Sendo assim gerei uma consulta usando o alias do graphql que a principio funcionou no graphql-ide.

query getFilter($params: [SelectedFacetInput]) {

  Brand1 : productSearch( selectedFacets: $params, fullText : "marca1" ) 
   @context(provider: "vtex.search-graphql") {
    recordsFiltered
  }
   Brand2 :  productSearch( selectedFacets: $params, fullText : "marca2" )
    @context(provider: "vtex.search-graphql") {
    recordsFiltered
  }
    queryAll :  productSearch( selectedFacets: $params )
     @context(provider: "vtex.search-graphql") {
    recordsFiltered
  }
}

Porém, quando faço essa consulta pela aplicacão ele me retona undefined ( estou utilizando o useLazyQuery a principio). Se eu tiro o alias e mantenho apenas uma consulta ele retona ex:

query getFilter($params: [SelectedFacetInput]) {
   productSearch( selectedFacets: $params, fullText : "brand1" ) @context(provider: "vtex.search-graphql")  {
    recordsFiltered
  }
}

Saberiam dizer se tem problema em utilizar alias ? ou alguma solução para este cenário ?

Att

2

Boa tarde alextalha!
Como esta a sua chamada no useLazyQuery? Você poderia me mostrar por favor?

1 Like
3

Boa tarde Ana.

Então agora minha chamada ao LazyQuery está desta forma a baixo. Porque só consegui sem o alias na query. logo tive que criar 3 consultas.

  const [
    getFilter,
    { data: filterAll, loading: queryAllLoading },
  ] = useLazyQuery(FILTER_ALL);

  const [
    getFilterBoss,
    { data: filterBoss, loading: queryAllLoadingBoss },
  ] = useLazyQuery(FILTER_ALL);

  const [
    getFilterHugo,
    { data: filterHugo, loading: queryAllLoadingHugo },
  ] = useLazyQuery(FILTER_ALL);

e com o useEffect estou aguardando as 3 consultas serem finalizadas para poder exibir o resultado.

Se o Alias funcionasse eu faria apenas uma consulta mas tive que alterar a query para funcionar.

query getFilter($params: [SelectedFacetInput]) {
  productSearch(selectedFacets: $params)
    @context(provider: "vtex.search-graphql") {
    recordsFiltered
  }
}
4

Oi @alextalha! De fato o uso de Alias é mais indicado para fazer esse tipo de operação, já que a solução paliativa de separar as chamadas ao useQuery faz com que 3 requisições diferentes sejam feitas ao servidor.

Você conseguiria passar o exemplo de como a chamada do useQuery e o acesso às variáveis retornadas no data estavam sendo feitos antes do ajuste paliativo?

Lembrando que a estrutura do data vai mudar um pouquinho, no seu exemplo ele deveria ter uma estrutura parecida com isso:

{
  "data": {
    "Brand1": {
      "RecordsFiltered": 1
    },
    "Brand2": {
      "RecordsFiltered": 2
    },
    "queryAll": {
      "RecordsFiltered": 3
    }
  }
}
1 Like