Closed oxiqod closed 1 year ago
Наш эндпоинт: https://wp.api.atls.academy/graphql
Необходимо по нему получить следующие сущности:
Hero должен тебе вернуть:
Digital становится всё более многолюдным, востребованность...
@apollo/client
, с которым ты выше познакомилась.@Nelfimov
Вопрос
каким образом я могу получить структуру схемы
? для понимания как именно составлять запросы к серверу
Вот пример схемы до sections
:
query NewQuery {
sections {
nodes {
content
}
}
}
@Nelfimov
У меня удалось получить данные в виде строки для фрагмента Info
(у меня там находится этот эта текстовая часть), добавила данные в компонент, вот как это выглядит на мобильной версии:
Воспроизведение
globals/data
ApolloProvider
всё, что идет в рендерgql
и хук useInfo
Описание
с сервера приходит такая сплошная строка с текстом и переносами:
"\nDigital становится всё более многолюдным, востребованность по направлениям при этом не снижается. Но специалистов, готовых нести ответственность за свои решения по-прежнему мало.\nAtlantis Academy обучает и формирует инженеров и архитекторов, а не программистов и дизайнеров.\n"
по макету на десктопной версии между строками есть элементы:
а на мобильной версии между двумя параграфами есть отступ:
Вопрос Так задумано? или мне нужно каким то образом форматировать полученную с сервера строку и делать отступ для мобильной версии и делить строку на 3 фрагмента для десктопной?
Так задумано - надо делать форматирование на стороне клиента.
В десктопе - замена "." на картинки. В обоих - разделить по "\n" на несколько тегов.
Добавил тебе новые записи в sections
:
title
: заголовок в секции, например в FAQ: "Вопросы и ответы"navigationName
: название секции для навбара и скроллспаяcontent
: текст под заголовкомТак же можешь подтянуть уже ссылки для навбара:
Контент для секции FAQ готов.
Контент для секции готов.
@Nelfimov https://github.com/atls-academy/oksssvv.github.io/issues/33#issuecomment-1669214372
по макету там title с большой буквы, а responce получаю с маленькой, или не критично?
или же мне самой просто сделать первую букву апперкейс?
Делаем как по дизайну - у клиента трансформируем в заглавные.
@Nelfimov
накопилось несколько уточнений по данным с сервера
Курсы:
Основы разработки
приходит название лейбла обучение
, по макету там мини-курс
Навбар в левой части сайта:
Бегущая строка:
github atom figma
еще нет?Дескрипций для карточек еще нет?
Все есть:
Во вторую, большую карточку с заголовком Основы разработки приходит название лейбла обучение, по макету там мини-курс
Обновил.
с сервера приходит 4 заголовка (Academy,Курсы,Обучение,FAQ), в макете 6 (Academy,Курсы,Ученики,Обучение,Стипендия,FAQ)
Это косяк макета - у тебя скроллспай должен соответствовать верхнему навбару.
Правильно ли я поняла, что пока готова только первая строка со скиллами, а github atom figma еще нет?
Добавил
@Nelfimov
наоборот) во вторую карточку мини-курс с заголовком Основы разработки
или я могу на клиенте местами их поменять?
@oksssvv Поправил.
@Nelfimov попробовала получить image для карточки, удалось, но цвет другой, я правильно поняла что путь такой:
courses {
nodes {
course {
image{
sourceUrl
}
}
}
}
на левой карточке получаемое изображение с сервера:
Все верно. Для картинки надо применить градиентный фильтр.
@oksssvv свой косяк поправил - картинка была неправильно выгружена из дизайна.
@Nelfimov
мне Андрей сказал что карточки нужно получать с сервера, т.е. как я поняла не верстать в ручную а мапить массив nodes
например не совсем ясно как это сделать с имеющимися направляющими (2 карточки идут в Column, затем 2 карточки идут в Row)
можешь пожалуйста поподробнее объяснить как это реализовать? и правильно ли я вообще поняла задачу
Все верно - тебе с бэкенда приходят данные, которые нужно размапить с помощью одного компонента Card.
Расположение в несколько рядов можно добиться двумя путями в CSS:
@Nelfimov
закончила с карточками, есть еще схемы к данным которые нужно получать с сервера?
если есть возможность получить полностью всю схему, то можешь подсказать как ее запросить? (чтоб была возможность проверить, не забыла ли я что-то)
У нас остался еще вот этот слайдер:
У него есть только заголовок. А вообще на странице все данные должны быть взяты из GraphQL, ничего "своего" не должно быть.
Я сообщу как будет готово.
Слайд готов, пробуй:
Секция Hero доделана, в content
:
Процесс готов
@Nelfimov
я правильно понимаю, что изображение которое отображается на слайдере это конечный узел с названием link
?
slides {
nodes {
slider {
text
image {
link
}
}
}
}
}
если да, то он некорректно отображается, и у полученной строки не вижу формат пнг, (например у изображения, которое я получала для карточки) вот что я получаю с сервера
"data": {
"slides": {
"nodes": [
{
"slider": {
"text": "Формирование системы базовых фрагментов и компонентов",
"image": {
"link": "https://wp.api.atls.academy/?attachment_id=141"
}
}
}
]
}
Обновил настройки - должно сработать. Принцип тот же что и у картинок курсов - sourceUrl
@Nelfimov а слайд для мобильной версии или я его не вижу просто?
@Nelfimov
еще текст в description
получаемый в steps
- не по макету
там фраза обрезана и умещается в 2 строчки, получаемый с сервера текст - в 3 строчки
@Nelfimov
макет:
Приходит с сервера:
ну т.е. там обрезается фраза для отображения 2х строчек, а с сервера приходит цвелая, я могу ее на клиенте отформатировать на самом то деле, просто подумала что ты не заметил и так не должно быть
Добавил слайдеры для мобильного и десктопа, запрос надо полностью переписать:
Цель
Ознакомиться с GraphQL, инструментом коммуникации между front-end и back-end.
План
curl
query
,mutation
,subscription
) (ресурс RU) (hexlet RU)Apollo Client
: наш инструмент коммуникации с сервером. (habr RU), (видео EN)