Попов Дмитрий
5 нояб. 2021 г., 6:18

Резюме в проекте

Где-то подсмотрел, как программист делает резюме на на тех технологиях, по которым ищет работу. Идея показалась интересной - решил повторить.
Собственно - вот: https://github.com/linklib/resume-v2

Озадачился вопросом поиска работы джуном по js. Для реализации резюме использую:
  • React
  • Typescript
  • Next js
  • Prisma
  • SQLite
  • Bootstrap React
Можно было бы обойтись без next и prisma, но тогда совсем бы "бедно" вышло. Хорошо бы было и Graphql использовать, но я с ним ещё только в первом приближении разобрался, маловато будет. Остальное тоже не на высшем уровне, но и я вроде на джуна претендую, не выше.

Описывать буду "крупными мазками", заостряя внимание на те моменты, которые вызвали заметные затыки в процессе. Если будут вопросы - пишите комменты. Итак, постановка задачи.

Нужна страничка с текстовым описанием и перечень навыков с фозможностью фильтра по категориям.

1. Разворачиваем next.js с typescript.

2. Устанавливаем и инициируем prisma. Для БД выбрал SQLite: позволяет стянуть проект и запустить его без размышлений о подключении к любой другой системе.

3. Пишем схему и деплоим её в БД.

4. Посев данных: готовим файл с данными. Вот здесь сыграла злую шутку моя невнимательность. Проблема с shadows database решалась просто директивой в package.json
//Не "prisma": { "seed": "ts-node prisma/seed.ts" }, //A "prisma": { "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts" },
5. Получение данных. Призмой забираем данные из БД с использованием SSR Next js. Так как призма позволяет не только получить данные, но итфильтровать по нужному параметру, я ошибочно пошел по пути фильтрайии на этапе получения. Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте. В итоге получился фильтр на React Hook с фильтром на этапе вывода данных.

6. Оформляем, добавляем для сео NextSeo.

Про картинки: в бд пишется путь к картинке. Сначала разместил картинки в папке images в корне, но отобразаться они категорически не хотели. Выяснилось, что единственное правилое для них место - папка public, дальше вложенность не имеет значения.

Вопросы и предложения принимаются с благодарностью.
Дима, привет!

Вижу, что уже знаешь больше и можешь что-то сделать. Это хорошо. Но есть моменты, конечно.

>> Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте.
1. Представь себе вытянуть многие сотни тысяч записей на клиент сразу.
2. Фильтрацию и сортировку сразу по нескольким полям (особенно при выборке сразу из нескольких таблиц) ты замахаешься делать на клиенте. Доволно простые для SQL задачи окажутся практически невозможными в реализации.

>> Выяснилось, что единственное правилое для них место - папка public, дальше вложенность не имеет значения.
Все верно. По соображениям безопасности JS не отдает просто так любой файл как статику. Вдруг у тебя там когфиг с паролями? Поэтому в next-js настроена отдача статики из public. Но можно и свои кастомные папки сервить. К примеру, вот здесь у меня мидлвара ресайза картинок, а так же сервинг из папок shared/ и uploads/ https://github.com/prisma-cms/nextjs-nexus/blob/43e101b9804245bd551aefbf8e067cfd808c1d0d/server/index.ts#L26-L42
Николай, привет!

>>> >> Пока искал решение задачи - понял её абсурдность: зачем делать запросы с условиями, если все данные на руках и можно фильровать их на месте.
1. Представь себе вытянуть многие сотни тысяч записей на клиент сразу.
2. Фильтрацию и сортировку сразу по нескольким полям (особенно при выборке сразу из нескольких таблиц) ты замахаешься делать на клиенте. Доволно простые для SQL задачи окажутся практически невозможными в реализации.
---
Это понятно, но для конкретного проекта - подходящее решение.
Вопрос:
Я сначала хотел запихать условие в

export async function getServerSideProps() { const teches: Tech[] = await prisma.tech.findMany({ include: { Category: true, }, }); return { props: { initialTeches: teches, }, }; }
Через свойство where. И как динамически это сделать на одной странице не разобрался. Была идея сделать пять страниц со своими параметрами. Хотел вынести в компонент и пропсами пробрасывать состояние выбранной категории. Но не свел все вместе с getServerSideProps().
Можешь подсказать, как было бы сделать правильно?
>> Хотел вынести в компонент и пропсами пробрасывать состояние выбранной категории. Но не свел все вместе с getServerSideProps().

Так а ты документацию официальную читал? https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } }
getServerSideProps имеет аргумент - context. А из этого контексты ты можешь получить множество полезных данных, включая GET-параметры и т.п. Разве это тебе не помогает в твоем вопросе?

Николай, привет!
Спасибо, проштудирую. Я сейчас Apollo Server настроил и через Apollo Client получаю данные (ветка plusapollo), как раз стоит вопрос о переписке фильтра.

Осталось Nexus ввести и можно углубляться в детали каждой технологии.
>> Осталось Nexus ввести и можно углубляться в детали каждой технологии.

Будь готов к тому, что вот в этот момент у тебя весь твой маленький мир и порушится :) Маленький мир здесь - это твой проект.
Я пока не буду тебе детали раскрывать, сначала поломай голову сам. Интересно, во что именно ты упрешься.
Николай, вопрос: правильно понимаю, что обновить переменную, который пихаю getServerSideProps(), можно только перегрузим страницу, добавив переменную в урлу. И тогда уже через context её получить и использовать?

Все верно. На то эта функция и называется getServerSideProps(), что она срабатывает на стороне сервера. Но обрати внимание на то, что у меня везде используется другая функция: getInitialProps(). Я не буду сейчас утверждать о различиях наверняка (так как давно уже не делал подобный ресерч), но скорее всего разница в кешировании данных. То есть getInitialProps() не кешируется. То есть при каждом заходе на страницу, данные в ней запрашиваются. А вот getServerSideProps() может работать иначе (хотя это предположение и требуется перепроверить): как вариант, он может кешировать данные в билд, или не совсем динамически подгружать в режиме SPA. В общем, поизучай эти моменты более внимательно.

Добавить комментарий