Now we can shift our focus on building out the frontend of the application. We will start by configuring and setting up Apollo Client in our app. Then we will setup the components and pages. Before we begin, let’s create some files for filters and queries we will use throughout our app.

Create a new folder utils in the root and a new file /utils/filters.js. Here, we have a filter for formatting currency and converting decimal values to percentage.

Next, create a new file to store our GraphQL queries, /utils/queries.js. The getCoinDetails queries takes two parameters, coinid and interval, which are both type of String and is required.

Configuring Apollo Client

Create a new file apollo-client.js inside the utils folder and add the following code below. This file will create a new Apollo Client. We export it so we can use it in our entry point, _app.js.

The _app.js page

Create a new file /pages/_app.js. This will be the entry point for all of our pages. This is where we import Apollo Client from the apollo-client.js file we just created and pass it into Apollo Provider. Then we wrap our entire application inside of the Apollo Provider.

The Layout component

Next, let’s tackle building out the layout. The layout is a wrapper component that will render all of our pages inside of it. This is where we will setup our Head content and Header. Let’s create that file in /components/_App/Layout.js.

The Header component

Moving on to the Header component. Create a new file /components/_App/Header.js and copy in the following code. This is our header that will display at the top of our application.

The CoinsTable component

Now that we have our layout, let’s build some core components. The Coins Table component will render a formatted table for a listed of coins passed into this component. Create a new file /components/Index/CoinsTable.js.

Each row is selectable. When you select the row, a modal will pop up displaying detailed information regarding that coin. Notice on line 45, we pass the selected coin into the modal so the modal can fetch detailed data on that selected coin.

The Coin Details Modal

Alright, let’s tackle the Coin Details Modal. Create a new file /components/Index/CoinDetailsModal.js and paste in the code below. Noticed on line 7, we destructured coinDetails from props that will be passed in from the CoinsTable. With that data, we can fetch detailed information on that coin.

When a modal first pops up, it displays detailed information on the selected coin over the last day. Users will be able to select other intervals such as 7 days, 30 days, 365 days, and year to date.

Please take note on line 57, I decided to componentize the table to display the coins detail into a separate file since this file is getting quite large.

The Coin Details Modal Table

Create a new file /components/Index/CoinDetailsModalTable.js. As mentioned above, this components displays the table in the modal with the detailed data on the selected coin.

The Home Page

Moving on to the home page, create a new file/pages/index.js. Upon page load, we will fetch the list of the top 30 cryptocurrencies and passed them into the CoinsTable component we built in earlier sections.

Since coin data changes constantly, I have set the fetchPolicy to network-only so we don’t cache any results. I have also set a polling interval of 5000ms, so 5 seconds. You can change this interval as you wish!

Testing our application

And now let’s run and test our application! Pop open your terminal and navigate to the root of the project, then run npm run dev. Once the app is compiled and ready, open https://localhost:3000 in your browser. If everything works correctly, you should see something similar to the screenshot below!

Now select a coin and checkout the modal!

Finally, select a different interval and verify the data is reflecting that change.

And that’s a wrap!

Source: https://medium.com/javascript-in-plain-english/build-a-cryptocurrency-tracker-with-next-js-and-apollo-graphql-c776cff6b8bf?source=rss——-8—————–cryptocurrency