Изучение @prisma-cms на базе API modxclub.ru. Топик 1: вывод пользователей с заведенными кошельками и баланса.

В рамках изучения @prisma-cms и шире (React, GrahQL, Apollo client и прочее) выполняю небольшие задачки. Что-то получается (но возможно можно сделать как-то лучше), что-то не очень. Думаю, что обсуждение таких задачек будет полезно не только мне.

Задача: подготовить модуль для вывода пользователей сайта modxclub.ru с открытыми кошельками и текущего баланса. Данные пользователей: имя и аватар.

Базовый модуль: https://github.com/Fi1osof/test-prisma-users. Здесь уже сформирован gql запрос и вывод id пользователей. Подключение к API отсюда: https://modxclub.ru/topics/razvorachivaem-u-sebya-kopiyu-modx-kluba.html

Внесены изменения в вывод данных:

  return (
      <div>

        {objects.map(n => {

          const {
            id,
            username,             
            EthAccounts
          } = n;

          const {
            balance,
          } = EthAccounts || {}
          
           //console.log("EthAccounts", EthAccounts);        
          

          return <div
              key={id}
            >            
                   
              
                {
                    EthAccounts.map(eth => {

                    const {
                      id:eth_id,
                      type,
                      balance,
                    } = eth;

                    console.log("Eth", eth); 

                    return <div
                      key={eth_id}
                      style={{
                        borderBottom: "1x solid",
                      }}
                    > 
                      Пользователь: {username} <br/>
                      Баланс: {balance}
                    </div>
                    

                  })
                }          
           
           </div>
        })}
      </div>
    );

Есть подозрение, что вместо второй обработки массива есть более правильный вариант.

С аватаркой возник вопрос. https://modxclub.ru/images/resized/thumb/9c2bd2946018db2f057ec646aac3f04f.jpeg Данных не хватает, нужно добыть название файла. Для этого добавил в gql запрос и в переменные поле image, что дало возможность сформировать ссыль на картинку.

<img src={"https://modxclub.ru/images/resized/thumb/" + image}/><br/>
Пользователь: {username} <br/>
Баланс: {balance}<br/><br/>

Хорошо бы добавить еще проверку на наличие картинки и вывод картинки-заглушки при отсутствии картинки.