Conectando backend e frontend
Conectando backend e frontend
Introdução
Agora aprenderemos como recuperar dados do backend e exibi-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:
-
Primeiramente, em seu tema clonado (
store-theme
) acesse o arquivostore/blocks/pdp/product.jsonc
e, no blocoflex-layout.col#right-col
adicione o blococountdown
, logo antes dobuy-button
:"product-gifts", + "countdown", "flex-layout.row#buy-button", "availability-subscriber",
-
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 componenteCountdown
renderizado.
Query de Release Date
-
Crie uma pasta
react/queries
e nela adicione um arquivoproductReleaseDate.graphql
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.query productReleaseDate($slug: String) { product(slug: $slug) { releaseDate } }
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 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
:"vtex.search-graphql": "0.x", "vtex.product-context": "0.x"
-
Agora, é necessário importar os hooks
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.graphql
.// react/Countdown.tsx import React from 'react' ... +import { useQuery } from 'react-apollo' +import useProduct from 'vtex.product-context/useProduct' +import productReleaseDate from './graphql/productReleaseDate.graphql'
É importante notar que há a possibilidade da sua IDE mostrar um erro ao fazer o import do
product-context
.Vale ressaltar também que a prop
targetDate
não será mais necessária, então pode removê-la. -
Feito isso, defina a query usando o
productReleaseDate
importado e ouseQuery
. Os dados de produto podem ser encontrados emuseProduct
. Ambos são hooks, e portanto, devem ser adicionados dentro de um componente funcional React.+ const { product } = useProduct() + const { data, loading, error } = useQuery(productReleaseDate, { + variables: { + slug: product?.linkText + }, + ssr: false + })
linkText
será igual a'red-analogic-coffee-and-tea-machine'
, por exemplo, quando o seu componente for renderizado na página deste produto. -
Agora que estamos utilizando nosso bloco em páginas que têm contexto de produto, é importante testar se este context existe. Para fazer isso, vamos adicionar o bloco de código abaixo:
if (!product) { return ( <div> <span>There is no product context.</span> </div> ) }
-
Além disso, é preciso tratar os casos de loading e error antes de retornar o componente principal do contador ao utilizar o hook
useQuery
. Para isso, é possível retornar umspan
em cada um dos casos, como no exemplo abaixo, dentro do componenteCountdown
:if (loading) { return ( <div> <span>Loading...</span> </div> ) } if (error) { return ( <div> <span>Erro!</span> </div> ) }
-
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:{ data: { product: { releaseDate: '2019-01-01T00:00:00"', __typename: "Product" } } }
-
Por fim, 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.-tick(targetDate, setTime) +tick(data?.product?.releaseDate || DEFAULT_TARGET_DATE, setTime)
Resultado no produto Red Front-Loading Washer:
No caso de você se deparar com casos em que o contador está contando para cima ou até mesmo com valores negativos, não se preocupe! Isso está relacionado ao fato de que o
releaseDate
pode estar no passado.
Muito bem!
Esse é o último passo do curso de Store Block, você avançou muito bem e esperamos que tenha aprendido bastante até esse momento. Parabéns!
Se você deseja continuar aprendendo mais em como desenvolver utilizando o VTEX IO, nós o encorajamos a começar nosso próximo curso, que foca em ensinar como desenvolver serviços no VTEX IO.
Está com dúvidas?
Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)
Ajude-nos a fazer este conteúdo melhor!
Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!
Faça uma contribuiçãoUpdated 9 months ago