---
updatedAt: 2025-05-14T07:59:27.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Connecting backend and frontend

<HTMLBlock>{`
<style>
      section#hub-content header h1, section#hub-content header h2 {
        color: #f71963
      }
    
      p {
        line-height: 1.5rem;
      }
    </style>
`}</HTMLBlock>

# Connecting *backend* and *frontend*

## Introduction

Now we will learn how to retrieve data from the *backend* and display it in the interface. VTEX IO uses [GraphQL](https://graphql.org/) as a language/technology for data transfer, which makes programming our components quite simple. We will modify our Countdown component to search for the *targetDate* of the **`releaseDate` field of a VTEX product**. To perform GraphQL queries in React, the **Apollo Client** is used, a state management lib that facilitates the integration of a GraphQL API with the *front-end* application.

The **Apollo Client** lib offers native integration with React, through *hooks*. Thus, making a *query* means using a *hook* that will not only perform the *queries* and *fetch* the data but will also provide caching and updating the UI state. This integration, called `react-apollo` is already declared in `package.json`.

## Preparation

* To implement this functionality, **add our countdown block on the product page** and also do our tests on this page as well. To do this, do the following:

1. On your cloned theme (`store-theme`) access the `store/blocks/pdp/product.jsonc` file and, on the `flex-layout.col#right-col` block add the `countdown` block, right before the `buy-button`:

   ```diff
       "product-gifts",
   +	 "countdown",
       "flex-layout.row#buy-button",
       "availability-subscriber",
   ```

2. Now, run `vtex link` on your theme again (if the process is not already running). It's done! Now our block is on the product page. Access any of these pages and see the rendered `Countdown` component.

## Release Date Query

1. First, create a folder in your Countdown app, `react/queries` and add a `productReleaseDate.graphql` file to it that will contain the *query* to be made. In particular, this *query* will receive a term, which will be **the product slug to be retrieved at the launch date**. It will call the *resolver* `product`, already available through the `vtex.search-graphql` app, and we will retrieve only the field we need.

   ```graphql
   query productReleaseDate($slug: String) {
     product(slug: $slug) {
       releaseDate
     }
   }
   ```

   > Note that the query will need the *slug* of the product we are looking for. To do so, **retrieve this information of the VTEX Product context**.

2. To use this query, it is necessary **to add the `vtex.search-graphql` app as a dependency on your app**. We will also need to use the `useProduct` hook, exported by the `vtex.product-context` the app, to retrieve the product slug that is loaded on the page. To do this, in your app's `manifest.json`, add in dependencies:

   ```
   "vtex.search-graphql": "0.x",
   "vtex.product-context": "0.x"
   ```

3. Now, it is necessary to import the `useQuery` hooks, to make the *query* that will return the data we described, and `useProduct`, to give us information about the current product slug. In addition, it is also necessary to import the *query* defined previously, which is found in the file `productReleaseDate.graphql`.

   ```diff
   // 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'
   ```

   > It is important to higlight that there is the possibility of your IDE showing an error while importing `product-context`.

   > The prop `targetDate` will no longer be necessary, so you can remove it.

4. After that, define the query using the `productReleaseDate` imported and the `useQuery` hook, you can find the product data in `useProduct` hook. Since they are [hooks](https://reactjs.org/docs/hooks-intro.html), they only work inside react functional components.

   ```diff
   + const { product } = useProduct()
   + const { data, loading, error } = useQuery(productReleaseDate, {
   +   variables: {
   +     slug: product?.linkText
   +   },
   +   ssr: false
   + })
   ```

   > `linkText` will be the same as `'red-front-loading-washer'`, for example, when your component is rendered in this product's page.

5. Now that we're using our block in pages that have the product context, it's important to test if this context exists. To do that, let's add the following code block:

   ```tsx
   if (!product) {
     return (
       <div>
         <span>There is no product context.</span>
       </div>
     )
   }
   ```

6. Besides, it is important to deal with the cases in which there is no data fetched when using `useQuery` and before returning the main component: *loading* and *error* In those cases, it is possible to return a span in the countdown component, such as the example below:

   ```tsx
   if (loading) {
     return (
       <div>
         <span>Loading...</span>
       </div>
     )
   }
   if (error) {
     return (
       <div>
         <span>Error!</span>
       </div>
     )
   }
   ```

7. After sending the changes, access a product page and note that the *query* is working through a `console.log({data})` after calling `useQuery`, which should show something like this:

   ```ts
   {
     data: {
       product: {
         releaseDate: '2019-01-01T00:00:00"',
         __typename:  "Product"
       }
     }
   }
   ```

8. At last, but not least, to make Countdown set the hours for the product's `releaseDate`, change the `tick` function parameter. You can also remove the `props` received in the component, as they will no longer be used.

   ```diff
   -tick(targetDate, setTime)
   +tick(data?.product?.releaseDate, setTime)
   ```

Result using the *Red Front-Loading Washer* product:

> In case of having cases that the countdown is going up or with negative values, don't worry! It's related to the fact that some `releaseDate` can be in the past.

![image](https://user-images.githubusercontent.com/18706156/79596495-0fc28c00-80b7-11ea-8361-35075dba3bd5.png)

***

## Well done!

This is the last step of the Store Block course, you did really well and we hope you've learned a lot until this moment. **Congratulations!**

If you want to continue learning more about how to develop using VTEX IO, we encourage you to start our next course, which focus on teaching how to develop services on top of VTEX IO.

### Any questions?

See the [answersheet for this step](https://learn.vtex.com/docs/course-store-block-step08react-apollo-answersheet-lang-en) or check our \[office hours] on the VTEX Developers channel(<https://www.youtube.com/c/VTEXDevelopers>)

<HTMLBlock>{`
<div id="finished-course">
  <div class="finish-elems"><b class="rebelPink">Congratulations</b>, you finished the course!</div>
  <img class="finish-elems" src="https://media.giphy.com/media/g9582DNuQppxC/giphy.gif"/>
  
<div class="finish-elems">Still have time left?</div>
<a class="finish-elems" href=course-store-block-challenge-lang-en>Try our challenge for this course!</a>

</div>
`}</HTMLBlock>

<HTMLBlock>{`
<div id="finish-course">
  <a id="finish-link" href="/page/learning-path-lang-en">Finish Course</a>
</div>
`}</HTMLBlock>

<hr/>
<div id="contribute-container">
  <p id="contribute-title"> 
    Help us make this content better!
  </p>
  <p id="contribute-description">
    VTEX IO courses are open source. If you see something wrong, you can open a pull request!
  </p>

  <a id="contribute-button" href="https://github.com/vtex/vtex-courses/edit/master/courses/store-block/steps/08_react-apollo/en.md">
    Make a contribution
  </a>

  <p id="contribute-issue">
    or <a href="https://github.com/vtex/vtex-courses/issues/new/choose">open an issue</a>
  </p>

</div>