Топик несколько расширяет обзорное видео про вариацию prisma-cms. В видео добавляется новое поле, что далеко не впрямую экстраполируется на добавление новой таблицы в проект. Инструкция нужна для того, чтобы любой, еще не знакомый с этой технологией, понял как делать. Итак.
Задача: добавить в проект новую таблицу поста Технологии в свежий клон @prisma-cms/nextjs-nexus.
и первичный запуск. Порядок такой:
- git clone https://github.com/Fi1osof/nextjs-nexus
- yarn
- yarn dev
- подключение к БД
- yarn prisma:deploy для первичного создания таблиц БД
Здесь надо уточнить про "подключение к БД". Призма работает с четырьмя базами: MySQL, Postgres, SQLite, MongoDB. Про последнюю ничего сказать не могу, но вот остальными ситуация следующая: кроме подключенной в docker mysql базы ничего задействовать лично у меня не получилось. То есть ни mysql на хостинге (у себя на ubutu я что-то накосячил с установкой mysql и marinaDB, теперь ещё и удалить не могу:) ), ни postgres на Heroku, ни файлы SQLite не прокатили, так как для использования миграций требуется разрешение на создание shadow database - читать тут https://www.prisma.io/docs/concepts/components/prisma-migrate/shadow-database Я не разобрался, как побороть.
Здесь детально про разворачивание проекта: https://freecode.academy/topics/zapusk-testovogo-proekta-lokalno
2. Добавляем в схему новую таблицу. Это сюда: https://github.com/Fi1osof/nextjs-nexus/blob/master/prisma/schema.prisma
model Tech {
id String @id @default(cuid())
title String
desc String?
link String?
image String?
}
Табличка простая, подвешенная в воздухе, без связей.
И надо эту новую табличку запихать в БД:
yarn prisma:db:push
3. Дальше надо типизировать в nexus
добавляем папку Tech и файл index.ts
//Tech/index.ts
import { objectType, extendType } from 'nexus'
//Описываем новый тип
export const Tech = objectType({
name: 'Tech',
description: 'Технология',
sourceType: {
module: '@prisma/client',
export: 'Tech',
},
definition(t) {
t.nonNull.string('id')
t.nonNull.string('title')
t.string('desc')
t.string('link')
t.string('image')
},
})
//Расширяем объект Query, добавляя новое свойство tech
export const TechExtendQuery = extendType({
type: 'Query',
definition(t) {
t.crud.teches({
description: 'Список технологий',
filtering: true,
ordering: true,
})
t.crud.tech({
description: 'Технология',
})
},
})
Не забываем добавить экспорт сюда: https://github.com/Fi1osof/nextjs-nexus/blob/master/server/nexus/types/index.ts
export * from './Tech'
Для того, чтобы реализовать изменения в схеме надо "сделать миграцию"(?):
yarn prisma:migrate:create
4. В процессе работы со схемой приходится постоянно обновлять БД, что приводит к обнулению данных, а это не удобно (каждый раз заново заводить). Для решения
этого вопроса в prisma есть посев данных, то есть автоматическое наполнение таблиц данными. В @prisma-cms/nextjs-nexus метод используется, можем его расширить.
Для этого изменим файл https://github.com/Fi1osof/nextjs-nexus/blob/master/prisma/seed.ts
import { Prisma, PrismaClient } from '@prisma/client'
import { createPassword } from '../server/nexus/types/User/resolvers'
// Подключаем сами данные, которые будем сеять
import { tech } from './data'
//
const prisma = new PrismaClient()
const userData: Prisma.UserCreateInput[] = []
async function main() {
// eslint-disable-next-line no-console
console.log(`Start seeding ...`)
const password = process.env.SUDO_PASSWORD
if (!password) {
throw new Error('SUDO_PASSWORD env is empty')
} else {
userData.push({
username: 'admin',
password: await createPassword(password),
sudo: true,
})
}
for (const u of userData) {
await prisma.user
.create({
data: u,
})
.then((user) => {
// eslint-disable-next-line no-console
console.log(`Created user with id: ${user.id}`)
})
.catch(console.error)
}
// Закидываем данные в БД, в таблицу tech
await prisma.tech.createMany({
data: tech,
})
//
// eslint-disable-next-line no-console
console.log(`Seeding finished.`)
}
main()
.catch((e) => {
console.error(e)
process.exit(1)
})
.finally(async () => {
await prisma.$disconnect()
})
Файл с данными:
// data.ts в папке prisma, где и seed.ts
export const tech = [
{
title: 'Next JS',
desc: 'Fullstack React framework',
link: 'https://nextjs.org/static/twitter-cards/home.jpg',
image:
'https://decodenatura.com/static/fb8aa1bb70c9925ce1ae22dc2711b343/nextjs-logo.png',
},
{
title: 'Prisma',
desc: 'Fullstack React framework',
link: 'https://nextjs.org/static/twitter-cards/home.jpg',
image:
'https://decodenatura.com/static/fb8aa1bb70c9925ce1ae22dc2711b343/nextjs-logo.png',
},
]
Команда на посев:
yarn prisma:seed
5. Последнее, что не хватает для работы с данными - добавить сами запросы.
добавляем файл с простым запросом вывода всех технологий Tech.graphql
query teches {
teches {
id
title
desc
link
image
}
}
Теперь нужно провести "генерацию типов"(?):
yarn generate:types
Теперь можно получать данные.
Вот проект на github с текущими изменениями: https://github.com/linklib/resume/tree/840d329b51ffd95f4563076cec45b59f97dc475e
Дима, привет!
Рад, что ты что-то для себя новое освоил:) Но все же еще надо над знаниями поработать. И очень важно: поработать над терминами. Пока что ты многое называешь совсем не своими именами. Примеры.
>> Табличка простая, подвешенная в воздухе, без связей.
И надо эту новую табличку запихать в БД:
Нет, это еще не табличка. Пока что это только схема, описывающая структуру таблицы. Вот когда ты yarn prisma:push выполнишь, вот тогда призма возьмет эту схему, прочитает, сопоставит с текущей базой данных и сгенерирует запросы для обновления этой базы данных так, что бы она соответствовала схеме. Плюс к этому, призма сгенерирует все необходимые методы и типы, чтобы можно было работать с базой данных средствами JS. Все, больше никаких функций эта схема не выполняет и напрямую к БД никак не относится.
>> //Расширяем объект Query, добавляя новое свойство tech
Посмотри внимательно, у тебя там не только tech добавляется, но и techs
Ну а в целом, было бы сильно полезней, если бы ты сделал под эту статью сам клон проекта, все на нем выполнил, что в статье описываешь, и потом вылил бы измененный проект на гитхаб и сослался бы уже на измененный код, а не на исходный. И каждый желающий мог бы себе склонировать проект, запустить, перепроверить информацию. Да, так дольше, но так сильно эффективней. Я так делаю обычно.
А он есть) и коммит с добавлением есть. Тогда добавлю ссыль. Единственное, как фиксировать разные моменты проекта надо понять