Agora aprenderemos como recuperar dados do backend e exibí-los na interface. O VTEX IO utiliza GraphQL como linguagem/tecnologia para transferência de dados, o que torna a programação dos nossos componentes bastante simples. Iremos modificar o nosso componente Countdown para buscar o targetDate do campo releaseDate de um produto da VTEX. Para realizar queries GraphQL em React, é utilizado o Apollo Client, uma biblioteca de gerenciamento de estado que facilita a integração de uma API GraphQL com a aplicação front-end.
A biblioteca Apollo Client disponibiliza uma integração nativa com React, por meio de hooks. Dessa forma, realizar uma query significa usar um hook que não só realizará as queries e fará o fetch dos dados, mas também proverá cache e atualização do estado da UI. Essa integração, chamada react-apollo já está declarada no package.json.
Preparação
Para implementar esta funcionalidade, precisamos adicionar o nosso bloco countdown na página de produto, e também faremos nossos testes nessa página também. Para isso, faça o seguinte:
Em seu tema clonado (store-theme) acesse o arquivo store/blocks/product.jsonc e, no bloco flex-layout.col#right-col adicione o bloco countdown, logo antes do buy-button:
Rode vtex link em seu tema novamente (caso o processo já não esteja sendo executado).
Pronto, agora o nosso bloco está na página de produto. Acesse alguma destas páginas e veja o componente Countdown renderizado.
Query de Release Date
Crie uma pasta react/queries e nela adicione um arquivo productReleaseDate.graphqql que irá conter a query a ser feita. Em particular, essa query irá receber um termo, que será o slug do produto a ser recuperado a data de lançamento. Ela chamará o resolverproduct, já disponível pela app vtex.search-graphql, e recuperaremos apenas o campo que precisamos.
Perceba que a query precisará do slug do produto que buscamos. Para isso, recuperaremos esta informação do contexto de Produto da VTEX.
Para utilizar essa query, é necessário adicionar a app vtex.search-graphql como dependência em sua app. Também precisaremos utilizar o hook useProduct, exportado pela app vtex.product-context, para recuperar o slug do produto que está carregado na página. Para isso, no manifest.json de sua app, adicione em dependencies:
Agora, é necessário importar os hook useQuery, para fazer a query que retornará o dado que descrevemos, e useProduct, para nos dar a informação sobre o slug do produto atual. Além disso, também é preciso importar a query, definida anteriormente, que se encontra no arquivo productReleaseDate.graphqql.
// react/Countdown.tsx
import React from 'react'
+import { useQuery } from 'react-apollo'
+import useProduct from 'vtex.product-context/useProduct'
import { useCssHandles } from 'vtex.css-handles'
+import productReleaseDateQuery from './graphql/productReleaseDate.graphql'
Defina a query usando o productReleaseDateQuery importado e o useQuery, usando os dados do useProduct():
linkText será igual a 'red-front-loading-washer', por exemplo, quando o seu componente for renderizado na página deste produto.
Após enviar as modificações, acesse uma página de produto e verifique se a query está funcionando através de um console.log({data}) após a chamada do useQuery, que deve mostrar algo como isso:
Para fazer com que o Countdown marque as horas para o releaseDate do produto, mude o parâmetro da função tick. Você também pode remover as props recebidas no componente, já que não serão mais usadas.
Conectando backend e frontend
Introdução
Agora aprenderemos como recuperar dados do backend e exibí-los na interface. O VTEX IO utiliza GraphQL como linguagem/tecnologia para transferência de dados, o que torna a programação dos nossos componentes bastante simples. Iremos modificar o nosso componente Countdown para buscar o targetDate do campo
releaseDate
de um produto da VTEX. Para realizar queries GraphQL em React, é utilizado o Apollo Client, uma biblioteca de gerenciamento de estado que facilita a integração de uma API GraphQL com a aplicação front-end.A biblioteca Apollo Client disponibiliza uma integração nativa com React, por meio de hooks. Dessa forma, realizar uma query significa usar um hook que não só realizará as queries e fará o fetch dos dados, mas também proverá cache e atualização do estado da UI. Essa integração, chamada
react-apollo
já está declarada nopackage.json
.Preparação
countdown
na página de produto, e também faremos nossos testes nessa página também. Para isso, faça o seguinte:store-theme
) acesse o arquivostore/blocks/product.jsonc
e, no blocoflex-layout.col#right-col
adicione o blococountdown
, logo antes dobuy-button
:vtex link
em seu tema novamente (caso o processo já não esteja sendo executado).Countdown
renderizado.Query de Release Date
Crie uma pasta
react/queries
e nela adicione um arquivoproductReleaseDate.graphqql
que irá conter a query a ser feita. Em particular, essa query irá receber um termo, que será o slug do produto a ser recuperado a data de lançamento. Ela chamará o resolverproduct
, já disponível pela appvtex.search-graphql
, e recuperaremos apenas o campo que precisamos.Para utilizar essa query, é necessário adicionar a app
vtex.search-graphql
como dependência em sua app. Também precisaremos utilizar o hookuseProduct
, exportado pela appvtex.product-context
, para recuperar o slug do produto que está carregado na página. Para isso, nomanifest.json
de sua app, adicione emdependencies
:Agora, é necessário importar os hook
useQuery
, para fazer a query que retornará o dado que descrevemos, euseProduct
, para nos dar a informação sobre o slug do produto atual. Além disso, também é preciso importar a query, definida anteriormente, que se encontra no arquivoproductReleaseDate.graphqql
.Defina a query usando o
productReleaseDateQuery
importado e ouseQuery
, usando os dados douseProduct()
:Após enviar as modificações, acesse uma página de produto e verifique se a query está funcionando através de um
console.log({data})
após a chamada douseQuery
, que deve mostrar algo como isso:Para fazer com que o Countdown marque as horas para o
releaseDate
do produto, mude o parâmetro da funçãotick
. Você também pode remover asprops
recebidas no componente, já que não serão mais usadas.Resultado no produto Red Front-Loading Washer: