Создание страниц фонда …

Страницы фонда строительства…

Это вторая часть серии статей. Вы можете прочитать первую часть о запросе граф-протокола и первом контакте с Гэтсби здесь. Прочитав это, вы готовы читать вторую часть.

ЧАСТЬ ВТОРАЯ

Далее я покажу вам, как создавать страницы для фондов в сети Melon Network на очень простом примере.

Давайте создавать страницы!

Шаг 1:

Gatsby позволяет очень просто создавать страницы из запросов Graph-QL. Сначала вам нужно отредактировать файл gatsby-node.js. Вы можете найти его в корневой папке вашего проекта. В этом файле вы определяете, какие страницы создаются при создании статического веб-сайта. В этом случае мы хотим иметь одну страницу на фонд. Отредактируйте свой файл так, чтобы он выглядел как этот.

Файл использует API createPages от Gatsby. Страницы создаются с использованием fundTemplate.js (прокрутите вниз), поэтому источник для этого файла должен быть определен, как показано в строке 5. В строке 7 вы можете увидеть запрос данных из сети Melon для использования при создании страниц. . В строке 21 вы можете заметить цикл, в котором строятся страницы. В качестве пути для страниц фонда я выбрал адрес фонда, необходимым компонентом для сборки является упомянутый выше fundTemplate, а в качестве переменных контекста страницы для построения страницы я передаю идентификатор/адрес на страницы. Идентификатор необходим для запроса страницы в файле fundTemplate.js. Вы, наверное, заметили, что я запрашиваю только первые 10 фондов и только те, которые не закрыты с условием в Graph-QL-Query для этого примера.

Шаг 2:

OK — продолжим: теперь создайте папку templates в папке src. В этой папке создайте файл fundTemplate.js, скопируйте и вставьте в него следующий код.

В этом файле запрашиваются данные по каждому фонду (строка 30 и далее). Для каждого фонда, идентифицированного с помощью уникального идентификатора фонда (адреса фонда), теперь доступны имя, время создания, цена акции, общее предложение, валовая стоимость активов (GAV) и стоимость чистых активов (NAV). . Для объяснения этих значений взгляните на инструмент мониторинга, созданный Avantgarde Finance. Затем данные передаются в компонент Site. В качестве иллюстрации я передал в этот компонент одну переменную из контекста страницы (идентификатор) и данные из запроса страницы. Вы также можете передать идентификатор из запроса страницы, если вы измените свой запрос, чтобы у вас также был доступ к идентификатору.

Шаг 3:

Создайте еще одну папку components в каталоге src, создайте файл Site.jsx, скопируйте и вставьте Site.jsx код в файл.

gatsby develop