Building fund pages … – Gorilla Funds
This is a part Two in a series of articles. You can read Part One on querying the graph-protocol and making first contact with Gatsby here. Once you’ve read that, you’re ready to read Part Two.
PART TWO
In what follows, I will show you how to build pages for the funds on the Melon Network through a really easy-to-follow example.
Let’s build pages:
Step 1:
Gatsby lets you create pages from Graph-QL Queries in a really easy way. First you have to edit the gatsby-node.js file. You can find it in the root folder of your project. In this file you define what pages are created- when building the static website. For this case we want to have one page per fund. Edit your file so that it looks like this one.
The file uses the createPages API from Gatsby. The pages are built using the fundTemplate.js (scroll down), so the source for this file has to be defined as shown in line 5. In line 7 you can see the query for the data from the Melon Network to use in creating pages. In line 21 you can spot the loop in which the pages are built. As the path for the fund pages I have chosen the fund address, the necessary component for the build is the fundTemplate mentioned above and as page context variables to build the page I pass the id/address into the pages. The id is needed for the page query in the file fundTemplate.js. You will probably have noticed that I only query the first 10 funds and just those, that are not shutdown with the condition in the Graph-QL-Query for this example.
Step 2:
O.K — let’s go on: Now, create a folder templates in the src folder. In this folder create a fundTemplate.js file and copy and paste the following code into the file.
In this file the data for every fund is queried (line 30 ff.). For every fund identified with the unique fund-ID (the fund address), the name, the time of creation, the share price, the total supply, the gross asset value (GAV) and the net asset value (NAV) is now available. For an explanation of these values take a look at the monitoring tool built by Avantgarde Finance. The data are then passed into the Site component. As an illustration, I passed one variable from the page context (the id) and the data from the page query into this component. You can pass the id from the page query as well if you change your query so that you have access to the id as well.
Step 3:
Create another folder components in the src-directory, create a Site.jsx file and copy and paste the Site.jsx code into the file.
Step 4: Check the results
Run:
gatsby develop
in your terminal and visit localhost:8000/x in your browser.
What you should see is a list of links to all available fund pages. Click the links and you can see the rudimentary pages for the queried funds.
If you open the developer tools in your browser and open the console, you can easily spot what props are available at the moment for visualisation on the site.
It should now be easy for you to access the other queried fund values like GAV and NAV for you.
Cool, isn’t it? It’s also the end of PART TWO.
In PART THREE I will show you how to create a list of all funds, how to link the pages, and how to style it a bit.
Happy building.
Thanks to Julie Simon
Published at Wed, 04 Dec 2019 13:35:34 +0000
{flickr|100|campaign}
