Если я правильно понял: 1. Есть файл yarn generate:types, Нет, неправильно понял. yarn generate:types - это не файл, а выполняемая в терминале команда yarn с подпрограммой generate:types, прописанной в package.json: https://github.com/freecode-academy/freecode.academy/blob/master/package.json#L17. Тебя не насторожило, что yarn generate:types очень похоже на yarn dev, yarn build, yarn start и т.п. ? 2, 3, 4 - это все вот в этих скриптах: https://github.com/freecode-academy/freecode.academy/tree/master/src/modules/gql/cli/generateTypes. Но тебе пока туда не надо лезть, это все было написано для описания общей картины. Все остальное - тоже пока много не нужных вопросов. То есть ты пытаешься каждую букву разобрать. Этого не надо делать. Это все равно, как начать учиться водить машину и не тронуться с места, пока не выучишь ДВС со всеми законами термодинамики. Не надо так. Пока что просто вставь куда-нибудь {moment(task.startDate).format('lll')} с проверкой значения и возрадуйся тому, что что-то появится на странице. А потом глубже начнешь копать.

Если я правильно понял: 1. Есть файл yarn generate:types, который хранит в себе все модели и парметры всех запросов с типами. 2. Этот же файл yarn generate:types, ходит по проекту и собирает все GraphQL-запросы и компилирует их в Аполло-запросы. 3. Запрсы для GraphQL должны быть написаны специальным способом ...task_, чтобы можно было в них вставлять другие фрагменты. Для того, чтобы подцепить фрагмент он выносится в отдельный файл. Получается вроде базового запроса для которого мы формируем отдельные фрагменты в разных файлах и можем к нему подключить любой фрагмент или поменять. - Здесь вопрос: вставил этот запрос: в https://api.prisma-cms.com/, но он выдал что-то непонятное? 4. В итоге выполнение этого скрипта yarn generate:types, у нас появляются готовые аполо-функции. - Здесь вопрос: несовсем понятно, как они появляются и где они появляются. Они появляются в конкретных файлах сами и как ты контролируешь появление такого большого количества функций судя по самому файлу? И собственно, как этот файл понимает куда что пихать, а если ты в процессе работы решил новый запрос создать, его нужно перезапустить после создания запроса? 5. После чего делаем вызов запрсоа в функциональном компоненте. Здесь вопрос: const response = useTaskQuery({ variables, onError: console.error, }) Зачем здесь еще переменная variables и что такое onError: console.error откудо оно тянется? 6. В итоге мы делаем вывод в нуждном месте. Здесь вопрос: <Grid item> {CreatedBy ? ( <UserLink user={CreatedBy} withAvatar={false} /> ) : null} {createdAt ? ( <Typography variant="caption" color="textSecondary"> {moment(createdAt).format('lll')} </Typography> ) : null} </Grid> Зачем столько гридов мы ими регулируем в каком месте выводить? CreatedBy & createdAt в чем отличие зачем они нужны? 7. Создание task.startDate, как объект. Если правильно понимаю у объекта должен быть ключ и значение. По твоему из топика примеру не совсем понятно, как именно он дату выводит больше всего непонятно, как в данном случае вывод обращается к функции из 5 пункта {task.name}, {task.status} , или этот вывод: {createdAt ? ( <Typography variant="caption" color="textSecondary"> {moment(createdAt).format('lll')} </Typography> ) : null} Здесь я так понимаю он вообще к другой функции обращается, так как это из другой оперы. И какую страницу редактировать в итоге вьюху правильно https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/View/index.tsx ?

Таки сам постоянно пользуюсь.

https://ru.reactjs.org/docs/components-and-props.html Кстати очень хорошая документация, очень доступно все объясняют.

С топиком, видимо, неудачный пример я привел, потому что в таске вьюха - это функциональный компонент, а в топике классовые. Подробней о различиях между ними читай здесь: https://ru.reactjs.org/docs/components-and-props.html Если коротко, то у классовых компонентов несколько методов есть и в итоге конечная отрисовка выполняется в методе Component::render, а функциональные - это конечные функции, у которых нет условно дополнительных методов и они как будто и есть функция render, то есть они сами по себе через return возвращают то, что должно быть отрисовано на странице, а вся логика выполняется в них самих (и различных хуках, которые так же выполняются в них). Сразу обозначу, что сейчас я все пишу на функциональных, и вам советую. А где встретятся class-based - это просто legacy, то есть наследие, которое лень было переписывать :) Итак, тебе следует разобраться с жизненным циклом наших страниц. 1. Основа всего - GraphQL API. Так как данные мы забираем по API, то если мы не можем получить эти данные, то и вывести ничего не можем. Для того, чтобы выполнить GraphQL-запрос на API-сервер, нам надо этот самый запрос прописать (то есть query task {...} и т.п.). В классическом случае эти запросы прописывались непосредственно в аполло-запросах. Пример: https://www.apollographql.com/docs/react/data/queries/ Но это не круто. Представь, что один и тот же запрос выполняться будет в нескольких компонентах. Надо запросы уметь складывать куда-то так, чтобы можно было из разных мест дергать один и тот же. Но тут возникает и другая проблема: надо потом иметь возможность узнавать какие компоненты мы зааффектили, если изменили этот запрос, так как изменения могут быть критическими и надо бежать поправлять все компоненты, которые используют эти запросы. А еще нужна проверка, что эти запросы соответствуют схеме API-сервера, а то вдруг на сервере что-то поменялось и наши запросы сломанные. Вот для решения этих задач и написан скрипт, который вызывается yarn generate:types Этот скрипт обращается к API-серверу, тянет его схему и генерирует из него TypeScript типы https://raw.githubusercontent.com/freecode-academy/freecode.academy/master/src/modules/gql/generated/types.ts. В нем ты можешь найти в том числе и описание модели задачи. Среди всех полей можно найти как раз нужные нам startDate, endDate, startDatePlaning и endDatePlaning. То есть в принципе, если данные с сервера будут получены, то там и эти поля должны быть. Но на самом деле это зависит от того, какие поля на самом деле прописали в запросах. Так вот, вторая часть указанного скрипта - это пройтись по самому проекту, найти все написанные в нем GraphQL-запросы и сформировать уже для них типы и конечные аполло-запросы. В нашем случае запрос для страницы задачи написан здесь https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/gql/task.graphql: (хотя и будет скорее всего в будущем перемещен в https://github.com/freecode-academy/freecode.academy/tree/master/src/gql) Обрати внимание на конструкцию ...task_. Троеточие - это указывает на то, что здесь надо вставить другой фрагмент, имя которому легион (нет, task_). Шутка про легион не спроста, таких вложений фрагментов может быть сколько угодно, но GraphQL следит за тем, чтобы они были корректны и составлены по правилам, иначе выдаст ошибку. Фрагмент task_ описан здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/gql/fragments/task.graphql Там, как ты видишь, есть вложения и других фрагментов. Но главное, там есть вложение ...TaskNoNesting. В этом фрагменте перечислены нужные нам поля, так что все ОК. 2.Вывод полученных данных на странице. В результате выполнения этого скрипта у нас появляются готовые функции для выполнения API-запросов, которые содержат в себе все прописанные нами поля. Конкретно для таски у нас вот хук-запрос: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/modules/gql/generated/task.ts#L61-L63 То есть теперь, в любом нашем функциональном компоненте мы можем вызывать этот запрос и в ответ получать запрошенные данные. Что мы и делаем вот здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L32-L35 Надо понимать, что данные самого запрошеггого объекта - это не сам объект response, а его свойство data. Помимо data там есть и другие свойства, типа loading (флаг того, что запрос в процессе выполнения, errors и другие). См официальную документацию: https://www.apollographql.com/docs/react/data/queries/#result И вот полученный нами объект мы передаем во вьюху: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L52 И там уже получаем свойства этого объекта, как то {task.name}, {task.status} и т.п. Вот и ты там можешь получить, к примеру, task.startDate и вывести в каком-либо виде. Только следи за ошибками тайпскрипта, потому что эти поля не строчные, а объекты Date. Вот как раз для этого и давал вьюху топика как пример. Смотри как там вывод сделан. то есть выполняет проверка на наличие значения, и если есть, выводится через форматирование компонентом moment. Думаю, это должно тебе пролить свет на выполнение задачи.

Короче, что могу сказать, со структорой по видео вроде немного разобрался. По задаче, смотрю вьюху топика, если правильно понимаю нам нужно вывести такой же стейт во вьюхе задачи: onChangeState = (data: EditorComponentProps['_dirty']) => { this.updateObject(data) return data } Но что-то совсем не могу понять, как осуществляется вывод во вьюхе топика в гридах и в коде я не вижу совсем вывода даты. И если честно не совсем понимаю, как работают компоненты в реакте вроде добавляется, как тег компонент, а у тебя одни переменные с ретурном. И не совсем понимаю, почему ты скинул для примера именно вьюху топику, там где он создается, а не саму страницу топика где сам вывод?

Тогда тебе сюда: https://nextjs.org/docs/getting-started и сюда: https://github.com/vercel/next.js/tree/canary/examples и сюда: https://ru.reactjs.org/ и сюда: https://styled-components.com/ и сюда: https://graphql.org/ и вот сюда: https://www.apollographql.com/ и еще вот сюда: https://expressjs.com/ru/ И это далеко не все ресурсы, в которых ты боле менее должен ориентироваться, если хочешь знать проект в целом. Хотя бы чуть-чуть... Олег, у нас нет здесь задачи научить делать проекты с нуля От и До. В современных реалиях это почти нереально (сорри за каламбур). Задача состоит в том, чтобы каждый более менее освоил какое-то направление (или направления). Каждый по потельности самостоятельно какой-то боле менее крупный проект не сможет сделать, но вместе - вполне. То есть цель проекта - научить и объединить, а так же обеспечить платными задачами. Правильное обозначение целей - уже плюс к вероятности успешного результата.

Вообще на будущее, если планируется обучение на реально проекте. Было бы неплохо начать с того, как все ты эти технологии собрал в кучу react+nextJs+typeScript+GraphQl и начать прям самим собирать это все в кучу, чтобы было понятно откуда куда все прилетает, если конечно это возможно)

https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs Там все максимально подробно, От и До. В чем-то отличия будут, но общие правила будут все теже самые. В задаче я ссылки дал на файл, в котором работать и на файл-пример. Этого тебе достаточно для выполнения задачи. Сначала сделай хотя бы просто выбор. С оформлением (стилями и т.п.) будем бороться позже.

Такой вопрос. В react есть файл App, куда мы привязываем все страницы, если так корректно высказываться. Короче смысл в чем, есть ли какая-нибудь статья где описана структура твоего проекта. По папкам и файлам к примеру: Здесь react Здесь nextJs Здесь CSS Здесь typeScript Здесь JS что- то вроде этого?