Знакомство с GraphQL

[oxiqod]

Цель

Ознакомиться с GraphQL, инструментом коммуникации между front-end и back-end.

План

• Коммуникация с сервером - как и с помощью чего (MDN 1) (MDN 2) (github RU, до "Веб-сервер")
• Факультативно: покидать REST API запросы к Star Wars API с помощью curl
• REST и GraphQL: сходства и различия (aws.amazon.com RU) (habr RU)
• Виды запросов/операций (query, mutation, subscription) (ресурс RU) (hexlet RU)
• Схема GraphQL: формирование запросов (оф. документация EN)
• Apollo Client: наш инструмент коммуникации с сервером. (habr RU), (видео EN)

[Nelfimov]

Первое задание

Наш эндпоинт: https://wp.api.atls.academy/graphql

Необходимо по нему получить следующие сущности:

• Navigation
• Section
  • Hero

Пример

Hero должен тебе вернуть:

Digital становится всё более многолюдным, востребованность...

Материалы

• Для GraphQL мы используем @apollo/client, с которым ты выше познакомилась.
• drum-in - оформление кода и реализация.

[oxiqod]

@Nelfimov

Вопрос
каким образом я могу получить структуру схемы? для понимания как именно составлять запросы к серверу

[Nelfimov]

Вот пример схемы до sections:

query NewQuery {
  sections {
    nodes {
      content
    }
  }
}

[oxiqod]

@Nelfimov

У меня удалось получить данные в виде строки для фрагмента Info (у меня там находится этот эта текстовая часть), добавила данные в компонент, вот как это выглядит на мобильной версии:

Воспроизведение

1. добавила слой globals/data
2. завернула в ApolloProvider всё, что идет в рендер
3. добавила в нужный фрагмент запрос к gql и хук useInfo
4. добавила в компонент полученную строку

Описание
с сервера приходит такая сплошная строка с текстом и переносами:
"\nDigital становится всё более многолюдным, востребованность по направлениям при этом не снижается. Но специалистов, готовых нести ответственность за свои решения по-прежнему мало.\nAtlantis Academy обучает и формирует инженеров и архитекторов, а не программистов и дизайнеров.\n"

по макету на десктопной версии между строками есть элементы:

а на мобильной версии между двумя параграфами есть отступ:

Вопрос
Так задумано? или мне нужно каким то образом форматировать полученную с сервера строку и делать отступ для мобильной версии и делить строку на 3 фрагмента для десктопной?

[Nelfimov]

Так задумано - надо делать форматирование на стороне клиента.

В десктопе - замена "." на картинки. В обоих - разделить по "\n" на несколько тегов.

[Nelfimov]

Продолжение первого задания

Добавил тебе новые записи в sections:

• title: заголовок в секции, например в FAQ: "Вопросы и ответы"
• navigationName: название секции для навбара и скроллспая
• content: текст под заголовком

схема

sections {
  nodes {
    content
    title
    sections {
      title
      navigationName
    }
  }
}

Так же можешь подтянуть уже ссылки для навбара:

allNavigation {
  nodes {
    navigation {
      linkName
    }
    title
  }
}

[Nelfimov]

Секция FAQ

Контент для секции FAQ готов.

allFAQ {
  nodes {
    faq {
      answer
      question
    }
  }
}

[Nelfimov]

Секция Скиллы (бегущая строка)

Контент для секции готов.

skills {
  nodes {
    title
  }
}

[Nelfimov]

Секция Курсы

courses {
    nodes {
      course {
        title
        description
        label {
          ... on Label {
          id
          title
        }
      }
    }
  }
}

[oxiqod]

@Nelfimov
#33 (comment)

по макету там title с большой буквы, а responce получаю с маленькой, или не критично?

или же мне самой просто сделать первую букву апперкейс?

[Nelfimov]

Делаем как по дизайну - у клиента трансформируем в заглавные.

[oxiqod]

@Nelfimov

накопилось несколько уточнений по данным с сервера

Курсы:

• Дескрипций для карточек еще нет?
• Во вторую, большую карточку с заголовком Основы разработки приходит название лейбла обучение, по макету там мини-курс

Навбар в левой части сайта:

• с сервера приходит 4 заголовка (Academy,Курсы,Обучение,FAQ), в макете 6 (Academy,Курсы,Ученики,Обучение,Стипендия,FAQ)

Бегущая строка:

• Правильно ли я поняла, что пока готова только первая строка со скиллами, а github atom figma еще нет?

[Nelfimov]

Дескрипций для карточек еще нет?

Все есть:

Во вторую, большую карточку с заголовком Основы разработки приходит название лейбла обучение, по макету там мини-курс

Обновил.

с сервера приходит 4 заголовка (Academy,Курсы,Обучение,FAQ), в макете 6 (Academy,Курсы,Ученики,Обучение,Стипендия,FAQ)

Это косяк макета - у тебя скроллспай должен соответствовать верхнему навбару.

Правильно ли я поняла, что пока готова только первая строка со скиллами, а github atom figma еще нет?

Добавил

[oxiqod]

@Nelfimov

наоборот) во вторую карточку мини-курс с заголовком Основы разработки
или я могу на клиенте местами их поменять?

[Nelfimov]

@oksssvv Поправил.

[oxiqod]

@Nelfimov
попробовала получить image для карточки, удалось, но цвет другой, я правильно поняла что путь такой:

courses {
    nodes {
      course {
        image{
          sourceUrl
        }
      }
    }
  }

на левой карточке получаемое изображение с сервера:

[Nelfimov]

Все верно. Для картинки надо применить градиентный фильтр.

[Nelfimov]

@oksssvv свой косяк поправил - картинка была неправильно выгружена из дизайна.

[oxiqod]

@Nelfimov
мне Андрей сказал что карточки нужно получать с сервера, т.е. как я поняла не верстать в ручную а мапить массив nodes

например не совсем ясно как это сделать с имеющимися направляющими (2 карточки идут в Column, затем 2 карточки идут в Row)

можешь пожалуйста поподробнее объяснить как это реализовать? и правильно ли я вообще поняла задачу

[Nelfimov]

Все верно - тебе с бэкенда приходят данные, которые нужно размапить с помощью одного компонента Card.

Расположение в несколько рядов можно добиться двумя путями в CSS:

• flexwrap (предпочтительный) https://css-tricks.com/almanac/properties/f/flex-wrap/
• Grid

[oxiqod]

@Nelfimov

закончила с карточками, есть еще схемы к данным которые нужно получать с сервера?

если есть возможность получить полностью всю схему, то можешь подсказать как ее запросить?
(чтоб была возможность проверить, не забыла ли я что-то)

[Nelfimov]

У нас остался еще вот этот слайдер:

У него есть только заголовок. А вообще на странице все данные должны быть взяты из GraphQL, ничего "своего" не должно быть.

Я сообщу как будет готово.

[Nelfimov]

Слайд готов, пробуй:

query NewQuery {
  slides {
    nodes {
      slider {
        text
        image {
          link
        }
      }
    }
  }
}

[Nelfimov]

Секция Hero доделана, в content:

query NewQuery {
  sections {
    nodes {
      content
    }
  }
}

[Nelfimov]

Процесс готов

query NewQuery {
  processes {
    nodes {
      process {
        description
        title
      }
    }
  }
}

[oxiqod]

@Nelfimov
я правильно понимаю, что изображение которое отображается на слайдере это конечный узел с названием link?

  slides {
    nodes {
      slider {
        text
        image {
          link
        }
      }
    }
  }
}

если да, то он некорректно отображается, и у полученной строки не вижу формат пнг, (например у изображения, которое я получала для карточки) вот что я получаю с сервера

"data": {
    "slides": {
      "nodes": [
        {
          "slider": {
            "text": "Формирование системы базовых фрагментов и компонентов",
            "image": {
              "link": "https://wp.api.atls.academy/?attachment_id=141"
            }
          }
        }
      ]
    }

[Nelfimov]

Обновил настройки - должно сработать. Принцип тот же что и у картинок курсов - sourceUrl

[oxiqod]

@Nelfimov
а слайд для мобильной версии или я его не вижу просто?

[oxiqod]

@Nelfimov

еще текст в description получаемый в steps - не по макету

там фраза обрезана и умещается в 2 строчки, получаемый с сервера текст - в 3 строчки

[oxiqod]

@Nelfimov

макет:

Приходит с сервера:

ну т.е. там обрезается фраза для отображения 2х строчек, а с сервера приходит цвелая, я могу ее на клиенте отформатировать на самом то деле, просто подумала что ты не заметил и так не должно быть

[Nelfimov]

Добавил слайдеры для мобильного и десктопа, запрос надо полностью переписать:

query NewQuery {
  slides {
    nodes {
      slider {
        text
        imageDesktop {
          sourceUrl
        }
        imageMobile {
          sourceUrl
        }
      }
    }
  }
}